/*
  TOKENS — Acid Noir
  samuelmantega.com v2 · design-architect

  Fonte palette: docs/CONTRACT.md §1. Non aggiungere colori qui senza
  passare dal lead — è la fonte di verità condivisa con motion-engineer
  e section-builder.

  TIPOGRAFIA (CONTRACT §1.1, aggiornato 2026-07-25): stack di sistema,
  nessun webfont. Nessun <link> da aggiungere in nessuna pagina — vedi
  v2/DESIGN.md §1 per il motivo e per come è calibrata la gerarchia.
*/

:root {
  /* ---- Colore — Acid Noir (CONTRACT §1, non modificabile) ---- */
  --bg: #0A0A0A;
  --surface: #1A1A1A;
  --text: #F4F4F2;
  --accent: #CDFF3A;
  /* Testo secondario. #5A5A52 della palette resta sotto — come TESTO dava
     2,50:1 su --surface, sotto la soglia AA di 4,5. Questo valore ha la
     stessa tinta (60°) e la stessa saturazione, solo più chiaro: 5,33:1. */
  --text-muted: #8F8F84;
  /* Il grigio-oliva originale della palette, per bordi e decorazioni,
     dove il contrasto del testo non si applica. */
  --muted-deep: #5A5A52;

  /* Derivate — solo alpha della palette, via color-mix. Mai nuovi hue. */
  --hairline: color-mix(in srgb, var(--text) 12%, transparent);
  --hairline-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --surface-raised: color-mix(in srgb, var(--surface) 100%, var(--text) 6%);
  --surface-sunken: color-mix(in srgb, var(--bg) 100%, var(--text) 3%);
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 55%, transparent);
  --bg-scrim: color-mix(in srgb, var(--bg) 55%, transparent);
  --bg-scrim-strong: color-mix(in srgb, var(--bg) 82%, transparent);

  /* ---- Tipografia — stack di sistema, direzione Apple ---- */
  /* Display/body: SF Pro nativo su Apple, Segoe UI Variable su Windows,
     system-ui altrove. Nessun webfont scaricato. Numeri/meta/label: stack
     monospace di sistema. Motivazione completa in DESIGN.md §1. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;

  /* Pesi — 700 è il massimo assoluto (CONTRACT §1.1). La gerarchia si
     costruisce con dimensione e spazio, non con il peso: i display veri
     (hero, titoli pagina) usano --fw-bold, i sottotitoli/titoli di card
     usano --fw-semibold. Mai 800/900. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Scala fluida (clamp: min, preferito in vw, max) */
  /* --fs-hero: non più usato dalla home dalla v3 (2026-08-01) — la hero non ha
     più un titolo display, solo il video e le card. Tenuto per le pagine
     interne che ne avranno bisogno. È in cqw, quindi va applicato dentro un
     elemento con `container-type: inline-size`: si dimensiona sulla colonna
     che lo contiene, non sul viewport. Fallback @supports in base.css. */
  --fs-hero: clamp(2rem, 15cqw, 7rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;   /* solo .hero__title — il display più grande del sito */
  --lh-display: 1.1;  /* default per h1-h4 e titoli pagina */
  --lh-normal: 1.55;  /* body */

  /* Tracking: negativo e progressivamente più stretto quanto più il testo
     è grande (CONTRACT §1.1). 0 sul body. Positivo SOLO sulle micro-label
     uppercase (eyebrow, meta, index) — mai sui titoli. */
  --ls-hero: -0.035em;  /* .hero__title */
  --ls-h1: -0.03em;     /* .section__title e titoli pagina equivalenti */
  --ls-h2: -0.025em;
  --ls-h3: -0.015em;    /* .card__title, .project-card__title, default h1-h4 */
  --ls-body: 0em;
  --ls-label: 0.04em;   /* eyebrow, meta, field label, index — micro-label uppercase */

  /* ---- Spaziatura (base 4px, scala moltiplicativa) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  /* Ritmo verticale sezioni — fluido, vedi DESIGN.md §2 */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* ---- Radius — spigoli netti, non squircle SaaS. Vedi DESIGN.md §4. ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Elevazione — bordi hairline + luminanza, mai ombre nere-su-nero ---- */
  --elev-border: 1px solid var(--hairline);
  --elev-border-strong: 1px solid var(--hairline-strong);
  --elev-border-accent: 1px solid var(--accent-border);
  /* Unica ombra ammessa: diffusione leggerissima, tinta bg, solo su elementi
     flottanti sopra contenuto (cta-float). Mai su card in griglia. */
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, 0.6);

  /* ---- Breakpoints (riferimento — usare i valori letterali in @media) ----
     480  → mobile large
     768  → tablet
     1080 → desktop
     1440 → desktop wide
  */

  /* ---- Z-index map (CONTRACT §5) ---- */
  --z-header: 90;
  --z-cta: 100;
  --z-lightbox: 110;

  /* ---- Motion — solo transform/opacity, durate+easing condivise ---- */
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-flash: 70ms; /* micro-flash dello scatto, vedi .hero__flash */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}