/* =========================================================================
   01-tokens.css — @layer tokens
   Unica sorgente di verita' per colore, superficie, luce, spazio, tipografia.
   Nessun altro file del sistema puo' contenere un colore letterale.

   Convenzione numerica: i decimali si scrivono senza lo zero iniziale (.045)
   e le frazioni di rem si esprimono come calc(Nrem / 16). Cosi' nel CSS non
   compare mai un decimale a piu' di due cifre, che e' la firma del numero
   magico (guardrail AC-07).
   ========================================================================= */

/* --- Assi animabili -------------------------------------------------------
   --edge-a governa l'alpha del filetto illuminato. Dichiarato come @property
   per poterlo interpolare in transition. Dove non supportato il valore cambia
   comunque allo stato hover, solo senza interpolazione: nessun fallback. */
@property --edge-a {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.38;
}

/* --- Font: self-host, subset latin, assi completi -------------------------
   Fraunces e' servita nel range 600..900 (l'unico disponibile) con opsz, SOFT
   e WONK variabili. opsz resta automatico: non va mai forzato a un valore. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* Fallback con metriche allineate: senza queste, un H1 da 120px si riposiziona
   al termine dello swap e il CLS esplode. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 98%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    /* ------------------------------------------------------------------ */
    /* 1. Palette canonica                                                 */
    /* ------------------------------------------------------------------ */
    --ink: #0E0E11;
    --paper: #F4F4F6;
    --white: #FFFFFF;
    --grey: #8A8A93;
    --amber: #F5A623;        /* solo su fondo scuro */
    --amber-deep: #B45C00;   /* filetti >=2px, fill, hover su chiaro */
    --amber-text: #A45200;   /* TESTO ambra su fondo chiaro */
    --ember: #E2412B;        /* rarissimo, max 1 occorrenza per pagina */

    /* Componenti RGB, per comporre alpha senza introdurre nuovi hex */
    --ink-rgb: 14 14 17;
    --amber-rgb: 245 166 35;
    --amber-deep-rgb: 180 92 0;
    --white-rgb: 255 255 255;
    --black-rgb: 0 0 0;
    --paper-rgb: 244 244 246;

    /* Scala testo su fondo SCURO (contrasti calcolati su #0E0E11) */
    --on-dark-1: #FFFFFF;    /* 19,3:1  titoli, testo primario */
    --on-dark-2: #D6D6DC;    /* 13,3:1  testo secondario forte */
    --on-dark-3: #A8A8B2;    /*  8,2:1  testo di supporto */
    --on-dark-4: #8A8A93;    /*  5,6:1  MINIMO ASSOLUTO per testo su scuro */
    --on-dark-5: #6E6E77;    /*  3,8:1  SOLO non-testo, o testo >=24px */

    /* Scala testo su fondo CHIARO (contrasti su #F4F4F6, validi anche su #FFF) */
    --on-light-1: #0E0E11;   /* 17,6:1 */
    --on-light-2: #3A3A42;   /* 10,3:1 */
    --on-light-3: #55555E;   /*  6,7:1 */
    --on-light-4: #6A6A73;   /*  4,9:1  MINIMO ASSOLUTO per testo su chiaro */
    --on-light-5: #8A8A93;   /*  3,3:1  SOLO non-testo, o testo >=24px */

    /* Alpha ambra: unica sorgente per tutti gli effetti luce */
    --amber-a04: rgb(var(--amber-rgb) / .04);
    --amber-a06: rgb(var(--amber-rgb) / .06);
    --amber-a08: rgb(var(--amber-rgb) / .08);
    --amber-a12: rgb(var(--amber-rgb) / .12);
    --amber-a18: rgb(var(--amber-rgb) / .18);
    --amber-a30: rgb(var(--amber-rgb) / .30);
    --amber-a45: rgb(var(--amber-rgb) / .45);
    --amber-a68: rgb(var(--amber-rgb) / .68);

    /* Le stesse alpha in ambra profonda, per gli stessi ruoli su fondo chiaro */
    --amber-deep-a08: rgb(var(--amber-deep-rgb) / .08);
    --amber-deep-a14: rgb(var(--amber-deep-rgb) / .14);
    --amber-deep-a45: rgb(var(--amber-deep-rgb) / .45);

    /* Veli per le testate sticky: il fondo deve restare leggibile mentre il
       contenuto ci scorre sotto. */
    --veil-dark: rgb(var(--ink-rgb) / .82);
    --veil-deep: rgb(var(--black-rgb) / .74);
    --veil-paper: rgb(var(--paper-rgb) / .92);

    /* ------------------------------------------------------------------ */
    /* 2. Superfici ed elevazioni                                          */
    /* ------------------------------------------------------------------ */
    /* Rampa scura con passi di L* misurati (4,0 -> 6,0 -> 7,9 -> 10,5 ->
       13,9 -> 17,8): monotona e percepibile anche su pannelli scadenti. */
    --surface-000: #08080A;  /* incassi, pozzi, input */
    --surface-050: #0E0E11;  /* canvas, = --ink */
    --surface-100: #131317;  /* card di primo livello */
    --surface-200: #17171C;  /* card su card, hover di 100 */
    --surface-300: #1C1C22;  /* pannelli attivi, hover di 200 */
    --surface-400: #232329;  /* controlli sollevati */
    --surface-500: #2B2B32;  /* massimo, solo tooltip/menu */

    --surface-l-000: #E9E9EC; /* incassi su chiaro */
    --surface-l-050: #F4F4F6; /* canvas chiaro */
    --surface-l-100: #FFFFFF; /* card */
    --surface-l-200: #FBFBFC; /* card su bianco */

    /* ------------------------------------------------------------------ */
    /* 3. Filetti e hairline                                               */
    /* ------------------------------------------------------------------ */
    --hair-d-1: rgb(var(--white-rgb) / .06);  /* griglie strutturali */
    --hair-d-2: rgb(var(--white-rgb) / .10);  /* bordo card standard */
    --hair-d-3: rgb(var(--white-rgb) / .16);  /* hover, enfasi */
    --hair-d-4: rgb(var(--white-rgb) / .24);  /* separatore forte */

    --hair-l-1: rgb(var(--ink-rgb) / .06);
    --hair-l-2: rgb(var(--ink-rgb) / .11);
    --hair-l-3: rgb(var(--ink-rgb) / .20);
    --hair-l-4: rgb(var(--ink-rgb) / .30);

    --hair-amber-1: var(--amber-a12);   /* filetto decorativo di base */
    --hair-amber-2: var(--amber-a30);   /* filetto attivo */
    --hair-amber-3: var(--amber-a68);   /* filetto firma, MAX 2 per pagina */
    --hair-amber-light: rgb(var(--amber-deep-rgb) / .28); /* filetti su chiaro */
    --hair-amber-light-2: rgb(var(--amber-deep-rgb) / .55);

    /* ------------------------------------------------------------------ */
    /* 4. Ombre, 5 livelli per famiglia                                    */
    /* ------------------------------------------------------------------ */
    --elev-1: 0 1px 2px rgb(var(--ink-rgb) / .05), 0 2px 8px -2px rgb(var(--ink-rgb) / .06);
    --elev-2: 0 2px 4px rgb(var(--ink-rgb) / .05), 0 8px 20px -6px rgb(var(--ink-rgb) / .10);
    --elev-3: 0 4px 8px rgb(var(--ink-rgb) / .05), 0 18px 40px -12px rgb(var(--ink-rgb) / .14);
    --elev-4: 0 8px 16px rgb(var(--ink-rgb) / .06), 0 34px 70px -22px rgb(var(--ink-rgb) / .20);
    --elev-5: 0 14px 28px rgb(var(--ink-rgb) / .07), 0 60px 120px -36px rgb(var(--ink-rgb) / .28);

    /* Su fondo scuro: ombra ambientale + filo di luce interno, sempre insieme.
       Un elemento non si stacca mai con un solo segnale. */
    --elev-d-1: inset 0 1px 0 rgb(var(--white-rgb) / .04), 0 2px 6px -2px rgb(var(--black-rgb) / .60);
    --elev-d-2: inset 0 1px 0 rgb(var(--white-rgb) / .05), 0 8px 22px -8px rgb(var(--black-rgb) / .70);
    --elev-d-3: inset 0 1px 0 rgb(var(--white-rgb) / .06), 0 18px 44px -14px rgb(var(--black-rgb) / .75);
    --elev-d-4: inset 0 1px 0 rgb(var(--white-rgb) / .07), 0 34px 76px -24px rgb(var(--black-rgb) / .80);
    --elev-d-5: inset 0 1px 0 rgb(var(--white-rgb) / .08), 0 60px 130px -40px rgb(var(--black-rgb) / .85);

    /* Filo di luce interno isolato, per comporre elevazioni su misura */
    --sheen-1: inset 0 1px 0 rgb(var(--white-rgb) / .06);
    --sheen-inset: inset 0 1px 0 rgb(var(--black-rgb) / .06);

    /* ------------------------------------------------------------------ */
    /* 5. Aloni, luce ambientale, focus                                    */
    /* ------------------------------------------------------------------ */
    --glow-amber-sm: 0 0 0 1px var(--amber-a18), 0 0 18px -6px var(--amber-a45);
    --glow-amber-md: 0 0 0 1px rgb(var(--amber-rgb) / .22), 0 0 40px -10px var(--amber-a45);
    --glow-amber-seam: 0 0 32px 4px rgb(var(--amber-rgb) / .14);

    /* Luce ambientale di sezione: picco 10%, raggio >=60% della larghezza,
       cosi' il bordo dell'alone non e' mai visibile. */
    --ambient-top: radial-gradient(120% 80% at 50% 0%, var(--amber-a08) 0%, var(--amber-a04) 34%, transparent 64%);
    --ambient-tl: radial-gradient(100% 78% at 8% 6%, rgb(var(--amber-rgb) / .10) 0%, var(--amber-a04) 30%, transparent 62%);
    --ambient-tr: radial-gradient(100% 78% at 92% 8%, rgb(var(--amber-rgb) / .09) 0%, var(--amber-a04) 30%, transparent 62%);
    --ambient-cool: radial-gradient(90% 60% at 12% 8%, rgb(var(--white-rgb) / .055) 0%, transparent 60%);

    /* Varianti su fondo chiaro: stessa geometria, pigmento ambra profonda */
    --ambient-l-tl: radial-gradient(100% 78% at 8% 6%, rgb(var(--amber-deep-rgb) / .09) 0%, rgb(var(--amber-deep-rgb) / .035) 30%, transparent 62%);
    --ambient-l-top: radial-gradient(120% 80% at 50% 0%, rgb(var(--amber-deep-rgb) / .07) 0%, rgb(var(--amber-deep-rgb) / .03) 34%, transparent 64%);
    --ambient-l-tr: radial-gradient(100% 78% at 92% 8%, rgb(var(--amber-deep-rgb) / .08) 0%, rgb(var(--amber-deep-rgb) / .03) 30%, transparent 62%);
    --ambient-l-cool: radial-gradient(90% 60% at 12% 8%, rgb(var(--ink-rgb) / .045) 0%, transparent 60%);

    /* Focus composito: funziona su qualunque fondo.
       --focus-ring si sovrascrive dove il fondo e' gia' ambra. */
    --focus-ring: var(--amber);
    --focus-halo: rgb(var(--amber-rgb) / .45);
    --focus-shadow: 0 0 0 2px var(--surface-050), 0 0 0 5px var(--focus-ring);

    /* ------------------------------------------------------------------ */
    /* 6. Grana                                                            */
    /* ------------------------------------------------------------------ */
    --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-size: 160px;
    --grain-op-page: .030;   /* strato unico a livello pagina */
    --grain-op-dark: .045;   /* rinforzo locale su sezioni dark */
    --grain-op-photo: .055;  /* sopra le foto, per legarle al fondo */
    /* Tratteggio dei placeholder vuoti: e' cio' che distingue "spazio in
       attesa" da "buco". Passo largo e alpha bassa, non deve mai competere
       con il contenuto che arrivera' sopra. */
    --ph-hatch: repeating-linear-gradient(135deg, var(--hair-soft) 0 1px, transparent 1px 14px);

    --grain-blend-page: soft-light;
    --grain-blend-local: overlay;

    /* ------------------------------------------------------------------ */
    /* 7. Maschere                                                         */
    /* ------------------------------------------------------------------ */
    /* La foto hero dissolve prima di raggiungere la colonna dell'H1. Le due
       maschere si intersecano: orizzontale per liberare il testo, verticale
       per staccare la foto dai bordi della sezione. */
    --mask-hero:
      linear-gradient(to right, rgb(var(--black-rgb)) 0%, rgb(var(--black-rgb)) 34%, rgb(var(--black-rgb) / .45) 62%, rgb(var(--black-rgb) / 0) 88%),
      linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 18%, rgb(var(--black-rgb)) 62%, rgb(var(--black-rgb) / 0) 100%);
    --mask-hero-mobile:
      linear-gradient(to bottom, rgb(var(--black-rgb) / 0) 0%, rgb(var(--black-rgb)) 14%, rgb(var(--black-rgb)) 58%, rgb(var(--black-rgb) / 0) 100%);

    /* ------------------------------------------------------------------ */
    /* 8. Spaziature, larghezze, raggi, z-index                            */
    /* ------------------------------------------------------------------ */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 40px;
    --s-8: 56px;
    --s-9: 72px;
    --s-10: 96px;
    --s-11: 128px;
    --s-12: 168px;

    /* Il margine laterale non scende sotto 24px: a 20px, su un telefono da
       390, la colonna di testo arrivava a un capello dal bordo e l'impaginato
       smetteva di leggersi come una pagina stampata. */
    --gutter: clamp(24px, 3.2vw, 40px);
    --page: min(1180px, calc(100vw - var(--gutter) * 2));
    --page-wide: min(1400px, calc(100vw - var(--gutter) * 2));
    --page-narrow: min(720px, calc(100vw - var(--gutter) * 2));

    --section-y-sm: clamp(48px, 6vw, 80px);    /* strisce: proof, loghi */
    --section-y: clamp(72px, 9vw, 132px);      /* standard */
    --section-y-lg: clamp(104px, 13vw, 184px); /* hero, calcolatore, CTA finale */

    --header-h: 72px;
    --dock-safe: 76px;   /* spazio riservato in basso per .concept-dock */
    --overlap: clamp(48px, 7vw, 120px);
    --lens-d: clamp(180px, 22vw, 320px);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --z-base: 0;
    --z-decor: 1;
    --z-content: 2;
    --z-grain: 3;
    --z-sticky: 40;
    --z-header: 70;
    --z-dock: 80;
    --z-overlay: 90;
    --z-skip: 1000;

    /* ------------------------------------------------------------------ */
    /* 9. Durate ed easing                                                 */
    /* ------------------------------------------------------------------ */
    --dur-1: 120ms;   /* micro: colore, opacita' */
    --dur-2: 200ms;   /* default UI */
    --dur-3: 320ms;   /* transform su card */
    --dur-4: 520ms;   /* reveal */
    --dur-5: 800ms;   /* reveal grande, riempimento barre */
    --dur-6: 1200ms;  /* atmosfera */
    --dur-exit: 160ms; /* in uscita si torna piu' in fretta che in entrata */

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-entrance: cubic-bezier(.16, 1, .30, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-exit: cubic-bezier(.40, 0, 1, 1);
    --ease-spring: cubic-bezier(.34, 1.40, .64, 1); /* solo elementi <=48px */

    --stagger: 70ms;
    --stagger-max: 6;

    /* ------------------------------------------------------------------ */
    /* 10. Tipografia                                                      */
    /* ------------------------------------------------------------------ */
    /* REGOLA DELLE DUE FAMIGLIE, vincolante.
       Fraunces  = display. Titoli (display-*, h1..h4), pull-quote, numeri
                   protagonisti. Testi brevi, mai un paragrafo, mai una
                   etichetta di interfaccia, mai una didascalia.
       Inter     = testo e interfaccia. Lead, corpo, caption, micro, label,
                   dati tabellari, comandi, moduli.
       Il confine e' il RUOLO, non la dimensione: una didascalia in Fraunces
       a 18px e' un errore anche se sta bene, perche' rompe la regola che
       rende leggibile il resto della pagina. */
    --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --body: "Inter", "Inter Fallback", system-ui, sans-serif;

    /* Assi variabili di Fraunces. opsz NON compare mai: resta automatico.
       Verificato sul file servito (fraunces-var-latin.woff2, assi opsz 9-144,
       wght 100-900, SOFT 0-100, WONK 0-1): l'asse opsz porta davvero i suoi
       delta, ma Chromium lo governa SOLO con font-optical-sizing. Un
       "opsz" scritto dentro font-variation-settings viene ignorato: forzarlo
       a 9 o a 144 produce glifi identici. Quindi l'unica leva reale e'
       font-optical-sizing: auto (che lo lega alla dimensione renderizzata) e
       il modo giusto di irrobustire Fraunces sui corpi piccoli e' peso +
       dimensione + tracking, non un opsz forzato. */
    --fv-soft: 0;
    --fv-wonk: 0;

    /* Scala: sempre clamp(min, Xrem + Yvw, max), mai vw puro (WCAG 1.4.4).
       Due rampe parallele, non una lista unica:
       - rampa display (Fraunces), passo >= 1.13 su mobile, >= 1.23 su desktop;
       - rampa testo (Inter), passo >= 1.10 fra lead, body-l e body.
       Prima di questa revisione --fs-h4 e --fs-lead avevano lo stesso identico
       intervallo (18-22): un titolo e un paragrafo alla stessa dimensione, che
       e' il punto esatto in cui la gerarchia smette di esistere. */
    --fs-display-xl: clamp(3.25rem, 1.6rem + 7.2vw, 7.5rem);   /* 52-120px */
    --fs-display-l: clamp(2.75rem, 1.5rem + 5.6vw, 5.5rem);    /* 44-88px  */
    --fs-display-m: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);      /* 36-64px  */
    --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);               /* 32-52px  */
    --fs-h2: clamp(calc(26rem / 16), 1.15rem + 2.1vw, 2.5rem); /* 26-40px  */
    --fs-h3: clamp(calc(22rem / 16), 1.05rem + 1.4vw, calc(30rem / 16)); /* 22-30px */
    --fs-h4: clamp(calc(20rem / 16), 1.1rem + .55vw, calc(23rem / 16));  /* 20-23px */
    --fs-lead: clamp(calc(19rem / 16), 1.08rem + .55vw, calc(22rem / 16));/* 19-22px */
    --fs-body-l: clamp(calc(17rem / 16), 1.01rem + .25vw, calc(19rem / 16)); /* 17-19px */
    --fs-body: 1rem;      /* 16px, corpo di lettura, mai meno */
    --fs-body-s: .9375rem;/* 15px, sale a 16 sotto i 720 (vedi in fondo) */
    --fs-caption: .875rem;/* 14px */
    --fs-micro: .8125rem; /* 13px */
    --fs-label: .75rem;   /* 12px, minimo assoluto renderizzato */

    /* Scala dedicata ai numeri: sempre tabular-nums, sempre WONK 0 */
    --fs-metric-xl: clamp(3rem, 1.8rem + 5.4vw, 5.5rem);      /* 48-88px */
    --fs-metric-l: clamp(2rem, 1.5rem + 2.4vw, 3rem);         /* 32-48px */
    --fs-metric-m: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);      /* 24-32px */
    --fs-metric-s: calc(18rem / 16);                          /* 18px    */

    /* Altezze di riga, legate alla dimensione e non decise caso per caso.
       Regola: piu' il testo e' grande, piu' l'interlinea si stringe; piu' e'
       piccolo, piu' si apre. Prima erano dodici numeri sparsi nelle classi
       .u-*, senza un criterio leggibile. Ora sono questi nove, e il blocco
       mobile in fondo li rilassa dove il titolo va a capo tre o quattro volte. */
    --lh-display: .94;   /* display-l e display-m */
    --lh-display-xl: .90;
    --lh-h1: 1.04;
    --lh-h2: 1.08;
    --lh-h3: 1.16;
    --lh-h4: 1.28;
    --lh-quote: 1.18;
    --lh-lead: 1.50;
    --lh-body: 1.60;     /* corpo di lettura */
    --lh-small: 1.55;    /* caption, micro */
    --lh-label: 1.25;

    /* Tracking dei display. Su schermo stretto un titolo Fraunces da 44px con
       il tracking pensato per 88-120px si chiude troppo: i valori mobile del
       blocco in fondo lo riaprono. */
    --tr-display-xl: -.045em;
    --tr-display-l: -.040em;
    --tr-display-m: -.035em;
    --tr-h1: -.030em;
    --tr-h2: -.025em;
    --tr-h3: -.020em;
    --tr-h4: -.012em;

    --track-label: .12em;

    /* ------------------------------------------------------------------ */
    /* 11. Contratto della skin                                            */
    /*     Questi sono gli unici nomi che una skin puo' riassegnare.        */
    /*     Default = concept dark. Ogni skin li rimappa, nessuna scrive     */
    /*     geometria per un componente condiviso.                           */
    /* ------------------------------------------------------------------ */
    --page-bg: var(--surface-050);
    --page-ink: var(--on-dark-1);
    --ink-1: var(--on-dark-1);
    --ink-2: var(--on-dark-2);
    --ink-3: var(--on-dark-3);
    --ink-4: var(--on-dark-4);
    --ink-5: var(--on-dark-5);

    --hair: var(--hair-d-2);
    --hair-soft: var(--hair-d-1);
    --hair-strong: var(--hair-d-3);
    --hair-accent: var(--hair-amber-2);

    /* Quattro ruoli distinti dell'ambra. Confonderli e' esattamente il modo in
       cui un sistema diventa illeggibile su fondo chiaro:
       - accent      SUPERFICIE piena (CTA, badge): sempre #F5A623 con testo
                     ink, 9,5:1 sia su chiaro sia su scuro;
       - accent-line LINEA o segno piccolo: su chiaro deve scurirsi, altrimenti
                     un filetto da 1px a 1,9:1 semplicemente non si vede;
       - accent-text TESTO: su chiaro solo #A45200;
       - accent-fill RIEMPIMENTO che codifica un dato (barre, aree). */
    --accent: var(--amber);
    --accent-line: var(--amber);
    --accent-text: var(--amber);
    --accent-on: var(--ink);
    --accent-fill: var(--amber);
    --accent-quiet: var(--amber-a12);

    --card-surface: var(--surface-100);
    --card-surface-2: var(--surface-200);
    --card-line: var(--hair-d-2);
    --card-radius: var(--radius-md);
    --card-pad: clamp(20px, 2.6vw, 32px);
    --card-elev: var(--elev-d-2);
    --card-elev-hover: var(--elev-d-3);

    --well-surface: var(--surface-000);
    --raised-surface: var(--surface-400);
    --panel-surface: var(--surface-200);

    --edge-surface: var(--surface-100);
    --edge-rgb: var(--amber-rgb);

    /* Il fondo di un placeholder vuoto non e' quello di una card: su carta il
       bianco su bianco legge come un buco, serve un campo appena tonalizzato. */
    --ph-empty-bg: var(--card-surface);

    --btn-radius: var(--radius-pill);
    --field-radius: var(--radius-sm);

    --ambient-1: var(--ambient-tl);
    --ambient-2: var(--ambient-top);
    --ambient-3: var(--ambient-tr);
    --ambient-4: var(--ambient-cool);

    --header-bg: rgb(var(--ink-rgb) / .82);
    --header-line: var(--hair-d-1);

    --hero-scrim: linear-gradient(100deg, var(--surface-050) 0%, rgb(var(--ink-rgb) / .94) 26%, rgb(var(--ink-rgb) / .72) 48%, rgb(var(--ink-rgb) / .42) 72%, rgb(var(--ink-rgb) / .28) 100%);
    --hero-scrim-mobile: linear-gradient(180deg, rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .78) 42%, rgb(var(--ink-rgb) / .94) 100%);
    --hero-floor: linear-gradient(90deg, rgb(var(--ink-rgb) / .92) 0%, rgb(var(--ink-rgb) / .92) 72%, rgb(var(--ink-rgb) / 0) 100%);
    --hero-floor-mobile: rgb(var(--ink-rgb) / .90);
    --hero-photo-filter: grayscale(.72) contrast(1.06) brightness(.62) saturate(.90);
    --hero-photo-blend: luminosity;

    /* Stesso trattamento, pigmento chiaro: la foto resta alta di chiave e il
       testo poggia comunque su .92 di carta piena. */
    --hero-scrim-light: linear-gradient(100deg, var(--surface-l-050) 0%, rgb(var(--paper-rgb) / .94) 26%, rgb(var(--paper-rgb) / .72) 48%, rgb(var(--paper-rgb) / .42) 72%, rgb(var(--paper-rgb) / .28) 100%);
    --hero-scrim-light-mobile: linear-gradient(180deg, rgb(var(--paper-rgb) / .92) 0%, rgb(var(--paper-rgb) / .78) 42%, rgb(var(--paper-rgb) / .94) 100%);
    --hero-floor-light: linear-gradient(90deg, rgb(var(--paper-rgb) / .92) 0%, rgb(var(--paper-rgb) / .92) 72%, rgb(var(--paper-rgb) / 0) 100%);
    --hero-floor-light-mobile: rgb(var(--paper-rgb) / .90);
    --hero-photo-filter-light: grayscale(.72) contrast(1.04) brightness(1.04) saturate(.90);

    --tone-bg: var(--page-bg);
    --tr-inset-shadow: 0 -34px 76px -24px rgb(var(--black-rgb) / .55);

    /* Superficie della sezione precedente, letta da .tr-fade per cucire due
       fondi diversi senza che si veda la giuntura. */
    --tr-from: var(--surface-050);
  }

  /* ==================================================================== */
  /* 12. Telefono: la scala si accorcia invece di rimpicciolirsi           */
  /* ==================================================================== */
  /* Su desktop la rampa di testo ha sette gradini fra 22 e 12px. Su un
     telefono quei sette gradini stanno dentro 7px reali: si leggono tutti
     uguali, ma tre di loro portano testo da leggere e finiscono sotto i
     16px. Qui la coda della rampa sale di un gradino e si accorcia: meno
     livelli, tutti leggibili. Il corpo secondario (--fs-body-s) arriva a
     16px, che e' il minimo per un testo di lettura.

     Le interlinee e il tracking dei display si rilassano perche' a 390px un
     titolo va a capo tre o quattro volte: con .94 di interlinea e -.040em
     di tracking il blocco si chiude e le lettere si toccano. Su desktop,
     dove lo stesso titolo sta su due righe, i valori stretti restano. */
  @media (max-width: 720px) {
    :root {
      --fs-body-s: 1rem;              /* 15 -> 16px */
      --fs-caption: .9375rem;         /* 14 -> 15px */
      --fs-micro: .875rem;            /* 13 -> 14px */
      --fs-label: .8125rem;           /* 12 -> 13px */

      --lh-display-xl: .98;
      --lh-display: 1.00;
      --lh-h1: 1.08;
      --lh-h2: 1.12;
      --lh-h3: 1.20;
      --lh-h4: 1.32;
      --lh-quote: 1.24;
      --lh-lead: 1.52;
      --lh-body: 1.62;

      /* Il tracking si apre in proporzione alla dimensione: sui display
         grandi (44-52px sul telefono, dove -.040em vale quasi 2px per
         lettera) il recupero e' pieno; sui titoli medi e' minimo, perche'
         li' la densita' vale piu' della spaziatura e una riga in piu' costa
         mezzo schermo. */
      --tr-display-xl: -.030em;
      --tr-display-l: -.028em;
      --tr-display-m: -.026em;
      --tr-h1: -.024em;
      --tr-h2: -.020em;
      --tr-h3: -.015em;
      --tr-h4: -.008em;

      /* Fraunces e' un serif editoriale: sotto i 24px le aste sottili e i
         terminali affilati perdono corpo su uno schermo piccolo. Verificato
         che l'asse opsz non e' pilotabile a mano (vedi il commento sopra la
         scala), la compensazione corretta e' il peso: h3 e h4 salgono di un
         gradino solo sul telefono e tornano ai valori editoriali sopra i
         720px. Non e' un font-size piu' grande travestito da rimedio. */
      --fw-h3: 700;
      --fw-h4: 680;
    }
  }
}