/* ================================================================
   tokens.css — Leonardo Edition
   Design tokens come CSS custom properties.
   Tutti i valori visivi del progetto vivono qui.
   Modificare questo file per aggiornare l'intera UI senza toccare
   header.css o altri file di stile.
================================================================ */

:root {

  /* ── COLORI ──────────────────────────────────────────────────────
     Palette: limestone + bordeaux.
     Esplicitamente diversa da Oakame (rovere / sabbia / beige).
  ──────────────────────────────────────────────────────────────── */

  --color-bg:     #FFFFFF;   /* bianco puro — fondo pagina, header, megamenu */
  --color-ink:    #0E0E0D;   /* near-black — derivato dal wordmark SVG        */
  --color-mid:    #BFBCB8;   /* cool grey — bordi, testo secondario           */

  /* ACCENT — Bordeaux confermato. Unica fonte di verità per tutti i punti
     accentati: voce nav attiva, trigger aperti, link hover, CTA selezione.  */
  --color-accent:       #5A1F2B;   /* bordeaux */
  --color-accent-hover: #6E2535;   /* bordeaux più chiaro — hover su superficie scura (es. CTA) */

  /*
    HAIRLINE
    ────────
    Usato per divisori quasi invisibili (footer drawer, separatori).
    NON usare border: 0.5px direttamente — su Windows 1x può sparire.
    Tecnica: pseudo-element height:1px + transform:scaleY(0.5).
      · 1x (Mac non-retina, Windows): 1px fisico leggibile, mai 0
      · 2x (Mac Retina): 1px CSS × 0.5 = 1 pixel fisico — true hairline
      · 3x: 1px CSS × 0.5 × 3 = 1.5px fisici — ancora sottile
    Alpha 0.18 calibrato per questa tecnica (non riduce colore, solo size).
  */
  --color-hairline: rgba(14, 14, 13, 0.18);


  /* ── TIPOGRAFIA — FAMIGLIE ───────────────────────────────────────
     Display  : Instrument Serif — serif da titoli, leggermente condensato.
                Titoli, nomi-titolo, citazioni, numeri grandi, corsivi
                d'accento. Da 20px in su, mixed-case, SOLO peso 400
                (non esistono altri pesi), mai text-transform: uppercase.
     Utility  : Satoshi — sans moderna. Navigazione, testi, etichette
                in maiuscolo spaziato, pulsanti, moduli, misure.
                Pesi 400 e 500.
  ──────────────────────────────────────────────────────────────── */

  /* Dichiarati (con correzione di scala) in css/fonts.css.
     display = titoli e nomi da 20px in su, solo peso 400 + corsivo;
     utility = tutto il resto. */
  --font-display:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-utility:  'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;


  /* ── TIPOGRAFIA — SCALA ──────────────────────────────────────────
     Base: 16px (1rem). MAI modificare font-size su :root o html.
     Valori espliciti (non ratio modulare) perché le taglie del drawer
     e della nav sono state concordate punto per punto.
  ──────────────────────────────────────────────────────────────── */

  --text-10:   0.625rem;    /*  10px — label micro (categoria card megamenu)    */
  --text-11:   0.6875rem;   /*  11px — utility links, social, footer drawer     */
  --text-13:   0.8125rem;   /*  13px — voci nav header desktop                  */
  --text-16:   1rem;        /*  16px — body testo descrittivo                   */
  --text-18:   1.125rem;    /*  18px — intro paragraph / body lead              */
  --text-20:   1.25rem;     /*  20px — nome prodotto card megamenu              */
  --text-24:   1.5rem;      /*  24px — heading intermedio (h3)                  */
  --text-36:   2.25rem;     /*  36px — drawer: Contatti, voci secondarie       */
  --text-40:   2.5rem;      /*  40px — drawer: Catalogo, Prodotti, Tessuti      */


  /* ── TIPOGRAFIA — ALIAS SEMANTICI ───────────────────────────────
     Token per ruolo (non per dimensione). Si appoggiano alla scala
     --text-* sopra: cambio la scala, gli alias seguono automaticamente.
     Non usati nella nav, definiti ora per il design system completo.
  ──────────────────────────────────────────────────────────────── */

  --fs-body:       var(--text-16);   /* Satoshi 16px — paragrafi descrittivi lunghi,
                                        schede prodotto, testo corpo pagina         */
  --fs-body-lead:  var(--text-18);   /* Satoshi 18px — primo paragrafo, intro sezione,
                                        testo editoriale sopra la griglia prodotti  */
  --fs-h3:         var(--text-24);   /* Instrument Serif 24px — titolo intermedio
                                        (es. nome sezione dentro una pagina),
                                        weight 400, mai uppercase                   */


  /* ── TIPOGRAFIA — SPAZIATURA LETTERA ─────────────────────────── */

  --tracking-widest: 0.12em;   /* uppercase utility (MENU, CHIUDI, labels)     */
  --tracking-wide:   0.06em;   /* nav links header desktop                     */
  --tracking-tight:  0em;      /* Instrument Serif display — no tracking        */


  /* ── SPAZIATURA ──────────────────────────────────────────────────
     Scala 4px. Usare sempre i token, mai valori magici nei componenti.
  ──────────────────────────────────────────────────────────────── */

  --space-4:    0.25rem;    /*  4px  */
  --space-8:    0.5rem;     /*  8px  */
  --space-12:   0.75rem;    /* 12px  */
  --space-16:   1rem;       /* 16px  */
  --space-20:   1.25rem;    /* 20px  */
  --space-24:   1.5rem;     /* 24px  */
  --space-32:   2rem;       /* 32px  */
  --space-40:   2.5rem;     /* 40px  */
  --space-48:   3rem;       /* 48px  */
  --space-64:   4rem;       /* 64px  */


  /* ── HEADER ──────────────────────────────────────────────────────
     I valori --header-height-* vengono letti da JS per posizionare
     il megamenu e calcolare l'offset dello scroll sentinel.
  ──────────────────────────────────────────────────────────────── */

  --header-height-expanded: 88px;
  --header-height-compact:  60px;
  --header-pad-v-expanded:  28px;   /* padding-block stato normale  */
  --header-pad-v-compact:   14px;   /* padding-block stato compatto */


  /* ── LOGO ────────────────────────────────────────────────────────
     Ratio SVG: 580 ÷ 82 = 7.073
     Logo ottobre 2026 (lettere ravvicinate, EDITION piu' grande).
     Altezze risultanti (w ÷ 5.23):
       182px → 34.8px
       128px → 24.5px
       114px → 21.8px
  ──────────────────────────────────────────────────────────────── */

  --logo-width-expanded: 182px;   /* header desktop espanso  */
  --logo-width-compact:  128px;   /* header desktop compatto */
  --logo-width-mobile:   114px;   /* header mobile (<1000px) */
  --logo-width-drawer:   114px;   /* header interno al drawer */


  /* ── MEGAMENU ────────────────────────────────────────────────────
     Altezza: porzione viewport occupata dall'overlay a schermo pieno.
     Lascia visibile ~28% di pagina sotto per dare contesto.
  ──────────────────────────────────────────────────────────────── */

  --megamenu-height: 72vh;


  /* ── CARD PRODOTTO (megamenu) ────────────────────────────────────
     Proporzione concordata: portrait 3:4 (vs landscape 4:3 di Oakame).
     3 card per categoria.
  ──────────────────────────────────────────────────────────────── */

  --card-ratio: 3 / 4;


  /* ── TRANSIZIONI CSS ─────────────────────────────────────────────
     Solo per micro-interazioni non-GSAP:
     compact header, hover colore link, opacity stato attivo.
     Le animazioni principali (megamenu, drawer) usano GSAP.
  ──────────────────────────────────────────────────────────────── */

  --duration-fast:  180ms;   /* hover colore link, icon opacity    */
  --duration-base:  280ms;   /* compact header, logo resize        */
  --ease-out:       ease-out;


  /* ── Z-INDEX ─────────────────────────────────────────────────────
     Scala in ordine crescente.
     Header sticky: 100. Backdrop: 150 (sopra contenuto, sotto overlay).
     Megamenu: 160. Drawer mobile: 200 (sopra tutto).
  ──────────────────────────────────────────────────────────────── */

  --z-header:   100;
  --z-backdrop: 150;
  --z-megamenu: 160;
  --z-drawer:   200;

}