/* ============================================================
   GANDINI LAB — DESIGN TOKENS
   Architettura a 2 livelli: PRIMITIVE (grezzi) → SEMANTIC (themati).
   Black & white · light-first · editoriale.
   Dark mode = uso "format" (inverso), attivabile via [data-theme].
   ============================================================ */

:root {
  color-scheme: light;

  /* ========== 1. PRIMITIVE — COLORE (scala neutra B&W) ========== */
  --gl-ink:        #04080D;   /* inchiostro del logo */
  --gl-white:      #FFFFFF;
  --gl-gray-50:    #F7F7F6;
  --gl-gray-100:   #F0F0EE;
  --gl-gray-150:   #E3E3E1;
  --gl-gray-200:   #D6D6D3;
  --gl-gray-300:   #C2C2BE;
  --gl-gray-400:   #9A9D9F;
  --gl-gray-500:   #797D81;
  --gl-gray-600:   #5A5E62;
  --gl-gray-700:   #3A3E43;
  --gl-gray-800:   #24282C;
  --gl-gray-900:   #14171A;
  /* superfici scure (format / dark) */
  --gl-night-900:  #04080D;
  --gl-night-800:  #0D1217;
  --gl-night-700:  #131A20;
  --gl-night-600:  #1B232A;
  --gl-night-line: #232A31;

  /* ========== 2. PRIMITIVE — TIPOGRAFIA ========== */
  /* Display = Minion Pro. 'Minion Pro' = self-host VARIABILE (peso continuo → semibold vero + optical sizing);
     'minion-pro-display'/'minion-pro' = Adobe Fonts (kit attuale 400/700). In produzione, aggiunto il Semibold al kit,
     anteporre di nuovo 'minion-pro-display'. */
  --font-display: 'Minion Pro', 'minion-pro-display', 'minion-pro', 'Spectral', Georgia, 'Times New Roman', serif;
  --font-text:    'Rethink Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* scala — rapporto ~1.25 coerente, ordine garantito, display fluido senza inversioni (px @ base 16) */
  --text-3xs:  0.6875rem;  /* 11  — label micro (eyebrow/indici): più piccola = più "strumento" */
  --text-2xs:  0.75rem;    /* 12  — caption */
  --text-xs:   0.8125rem;  /* 13  — overline/label */
  --text-sm:   0.9375rem;  /* 15  — small */
  --text-base: 1rem;       /* 16  — body */
  --text-md:   1.1875rem;  /* 19  — body-lg / subtitle */
  --text-lg:   1.5rem;     /* 24  — h4 / titolo card */
  --text-xl:   1.875rem;   /* 30  — h3 */
  --text-2xl:  2.375rem;   /* 38  — h2 */
  --text-3xl:  3rem;       /* 48  — h1 */
  --text-4xl:  clamp(3rem, 2.2rem + 3.2vw, 4.25rem);   /* display (>= 3xl) */
  --text-5xl:  clamp(3.75rem, 2rem + 7vw, 6.5rem);     /* hero display */

  --leading-display: 0.92; /* display monumentale (hero): il serif regge, il vuoto intorno fa il resto */
  --leading-tight:  1.04;
  --leading-snug:   1.22;
  --leading-normal: 1.5;
  --leading-body:   1.5;   /* blocchi di testo più densi dentro più vuoto (era 1.62) */
  --leading-loose:  1.8;

  --tracking-display: -0.035em; /* solo per i corpi display grandi: sotto i 40px resta -0.02 */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.14em;
  --tracking-widest: 0.22em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  /* peso titoli (Minion Display) = SEMIBOLD. Reso ora dal self-host variabile.
     Via Adobe Fonts: il kit attuale ha 400/700 → aggiungere "Minion Pro Semibold" per il 600 in produzione. */
  --weight-display:      600;   /* titoli principali — semibold */
  --weight-display-soft: 400;   /* titoli secondari / occhielli display */

  /* pesi Minion del wordmark (riferimento ai tier ottici del logo) */
  --logo-display: 600;   /* opsz 36 */
  --logo-standard: 640;  /* opsz 18 */
  --logo-robusto: 700;   /* opsz 8  */

  /* ========== 3. PRIMITIVE — SPAZIO (base 8) ========== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  /* ========== 4. PRIMITIVE — RADIUS / BORDER ========== */
  --radius-none: 0;
  --radius-xs:  2px;     /* editoriale: quasi a spigolo vivo */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  --border-hair: 1px;
  --border-thin: 1.5px;

  /* ========== 5. PRIMITIVE — MOTION ========== */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-slower:  720ms;
  --dur-ambient: 1200ms;

  --ease-standard: cubic-bezier(.22, .61, .36, 1);   /* calmo, decel. — default */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);       /* entrate morbide */
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);

  --stagger-step:  70ms;   /* ritardo incrementale per reveal a cascata */

  /* ========== 6. PRIMITIVE — LAYOUT ========== */
  --container:        1180px;
  --container-narrow: 760px;
  --container-wide:   1440px;
  /* breakpoint — i @media NON accettano var(): in CSS usare i valori (480/720/1024/1280).
     Queste variabili servono a JS, handoff e documentazione. */
  --bp-sm: 480px; --bp-md: 720px; --bp-lg: 1024px; --bp-xl: 1280px;
  /* griglia responsive */
  --grid-columns: 12;
  --grid-gutter:  16px;   /* = --space-4 */
  --grid-margin:  32px;   /* = --space-6 */
  --grid-max:     var(--container);

  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200;

  /* ========== 7. PRIMITIVE — FORM / CONTROLLI ========== */
  --control-height:    44px;   /* target tattile minimo (WCAG 2.5.5) */
  --control-height-sm: 36px;
  --control-pad-x:     14px;
  --control-pad-y:     11px;
  --field-radius:      var(--radius-sm);
  --field-border-w:    var(--border-hair);
  --disabled-opacity:  0.45;
  /* icone (Phosphor) — dimensioni standard */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;

  /* ============================================================
     SEMANTIC — LIGHT (default, preferito)
     ============================================================ */
  --color-bg:            var(--gl-white);
  --color-surface:       var(--gl-gray-50);
  --color-surface-2:     var(--gl-gray-100);
  --color-line:          var(--gl-gray-150);
  --color-line-strong:   var(--gl-gray-300);

  --color-text:          var(--gl-ink);
  --color-text-secondary:var(--gl-gray-700);
  --color-text-muted:    var(--gl-gray-600);  /* AA: ~6.5:1 su bg, ok anche per testo piccolo (gray-500 era 4.15, sotto 4.5) */

  --color-accent:        var(--gl-ink);     /* B&W: l'accento è l'inchiostro */
  --color-on-accent:     var(--gl-white);
  --color-inverse-bg:    var(--gl-ink);     /* superficie "format" inversa */
  --color-inverse-text:  var(--gl-white);

  --color-focus:         var(--gl-ink);
  --focus-ring:          0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  --shadow-xs:  0 1px 2px rgba(4,8,13,.05);
  --shadow-sm:  0 2px 8px -2px rgba(4,8,13,.08);
  --shadow-md:  0 8px 28px -10px rgba(4,8,13,.12);
  --shadow-lg:  0 18px 48px -18px rgba(4,8,13,.16);

  /* ----- form / controlli (semantici: adattano col tema via le var colore) ----- */
  --field-bg:           transparent;
  --field-border:       var(--color-line);
  --field-border-hover: var(--color-line-strong);
  --field-border-focus: var(--color-text);
  --field-text:         var(--color-text);
  --field-placeholder:  var(--color-text-muted);
  --state-error:        var(--color-text);   /* B&W: bordo ink + segno «!» + messaggio, mai solo colore */
}

/* esplicito per il toggle (valido anche su contenitori annidati) */
[data-theme="light"] { color-scheme: light; }

/* ============================================================
   SEMANTIC — DARK (uso "format" / inverso)
   Su [data-theme] qualsiasi nodo → permette anteprime annidate.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            var(--gl-night-900);
  --color-surface:       var(--gl-night-800);
  --color-surface-2:     var(--gl-night-700);
  --color-line:          var(--gl-night-line);
  --color-line-strong:   #333D45;

  --color-text:          var(--gl-white);
  --color-text-secondary:#C4C7CA;
  --color-text-muted:    #888D92;

  --color-accent:        var(--gl-white);
  --color-on-accent:     var(--gl-ink);
  --color-inverse-bg:    var(--gl-white);
  --color-inverse-text:  var(--gl-ink);

  --color-focus:         var(--gl-white);
  --focus-ring:          0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 2px 10px -2px rgba(0,0,0,.5);
  --shadow-md:  0 10px 32px -10px rgba(0,0,0,.6);
  --shadow-lg:  0 20px 56px -18px rgba(0,0,0,.7);
}