/* =============================================================================
   Design System v2 — tokens.css
   Single source of truth per il design system di lorenzocampanile.com
   Direzione: "Quiet Editorial / High Contrast" — monocromo, text-first.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLORE — modalita' light (default)
     Palette monocroma "fintech high-contrast". Il contrasto e' l'accento.
     Unica macchia di colore del sito: la selezione testo in giallo.
     --------------------------------------------------------------------------- */
  --paper:      #FFFFFF;  /* bianco puro - whitepaper */
  --ink:        #0A0A0A;  /* near-black - contrasto massimo, zero halation */
  --ink-muted:  #6E6E73;  /* grigio neutro - metadata, dek, caption */
  --ink-subtle: #A1A1A6;  /* placeholder, decorazioni estreme */
  --rule:       #E5E5E5;  /* divider, border input */
  --rule-strong:#0A0A0A;  /* divider forti = nero pieno */
  --accent:     #0A0A0A;  /* alias semantico: l'accento E' il nero */
  --selection:  #FFE566;  /* giallo evidenziatore - unica macchia di colore */

  /* Stati funzionali (rimangono monocromi) */
  --focus-ring-color: #0A0A0A;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---------------------------------------------------------------------------
     TIPOGRAFIA — famiglie
     --------------------------------------------------------------------------- */
  --font-serif: "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style",
                "Apple Garamond", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;

  /* ---------------------------------------------------------------------------
     TIPOGRAFIA — scala fluid (ratio 1.200, minor third)
     clamp(min, preferred, max) — responsive senza media query.
     --------------------------------------------------------------------------- */
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);   /* caption, small caps */
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem);   /* body */
  --step-1:  clamp(1.20rem, 1.15rem + 0.25vw, 1.33rem);   /* lead / dek */
  --step-2:  clamp(1.44rem, 1.37rem + 0.35vw, 1.60rem);   /* h3 */
  --step-3:  clamp(1.73rem, 1.63rem + 0.50vw, 1.93rem);   /* h2 */
  --step-4:  clamp(2.07rem, 1.93rem + 0.70vw, 2.31rem);   /* h1 */
  --step-5:  clamp(2.49rem, 2.30rem + 0.95vw, 2.78rem);   /* page title articolo */

  /* Line-height */
  --lh-tight:   1.2;    /* headings */
  --lh-snug:    1.35;   /* lead, caption */
  --lh-body:    1.65;   /* body long-form */

  /* Font weight (Inter & Source Serif 4 variable) */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Letter-spacing */
  --tracking-tight:  -0.015em;  /* headings grandi */
  --tracking-normal: 0;
  --tracking-wide:   0.08em;    /* small-caps metadata */

  /* ---------------------------------------------------------------------------
     MEASURE (lunghezza riga di lettura)
     --------------------------------------------------------------------------- */
  --measure:       66ch;   /* articoli, long-form */
  --measure-wide:  78ch;   /* home, index, sezioni piu' aeree */
  --measure-narrow:50ch;   /* caption, dek ristretti */

  /* ---------------------------------------------------------------------------
     SPACING — scala 4/8 base
     --------------------------------------------------------------------------- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px — stacco maggiore tra sezioni di pagina */

  /* ---------------------------------------------------------------------------
     RADIUS — volutamente minimo, niente pill
     --------------------------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  /* ---------------------------------------------------------------------------
     MOTION — usata con parsimonia, solo per hover/focus
     --------------------------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       200ms;

  /* ---------------------------------------------------------------------------
     BREAKPOINTS (per reference — il sito usa principalmente clamp() e non MQ)
     --------------------------------------------------------------------------- */
  --bp-s: 640px;
  --bp-m: 900px;
  --bp-l: 1200px;

  /* ---------------------------------------------------------------------------
     Z-INDEX (scala minima)
     --------------------------------------------------------------------------- */
  --z-base:    0;
  --z-sticky: 10;
  --z-modal:  50;
}

/* =============================================================================
   RESET LEGGERO & DEFAULT GLOBALI
   Non un reset completo (tipo normalize). Solo il minimo per far funzionare
   i token in modo prevedibile.
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

/* Rispetta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibile — applicato globalmente, ma sovrascrivibile dai componenti */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-1);
}