/*
 * tokens-theme.css — correzioni e aggiunte ai token di design-tokens.css (che resta intatto,
 * cosi' com'e' uscito dal Content Model Builder). Tutto quello che sta qui e' uno scostamento
 * documentato in SCOSTAMENTI.md e va riportato nel content model alla prossima revisione.
 * Carico: dopo design-tokens.css, prima di base.css (inc/assets.php).
 */
:root {
    /* --- Font: Adobe Fonts kit pnm1ipx (Luca, 2026-09-08). Il kit espone `clear-pro-pe` 400/700.
   *     Il Figma usa Regular (400) per titoli e display, SemiBold per etichette/bottoni (il kit
   *     non ha SemiBold: si usa 700). I pesi 800/700 dei token display sarebbero sintetizzati. */
    --font-display: "clear-pro-pe", "Noto Sans", sans-serif;
    --font-weight-display: 400;
    --font-weight-h2: 400;
    --font-weight-h3: 700; /* nel Figma i sottotitoli ciano sono SemiBold → 700 */
    --font-weight-statement: 400;
    --font-weight-label: 700;
    --font-weight-stat: 300; /* Figma 236:1940: Noto Sans Light. Aggiunto il peso 300 a Noto Sans. */
    --font-stat: var(--font-body);
    --letter-spacing-stat: -0.07em; /* Figma: tracking -6.65px su 95px */

    /* --- Scala tipografica: minimo dal token (375px), massimo dal Figma a 1440px (SCOSTAMENTI S-01).
   *     Retta 375→1440 (span 1065px): slope = (max-min)/1065, intercetta = min - slope*375. */
    --font-size-display: clamp(
        48px,
        31.8px + 4.319vw,
        94px
    ); /* display di sezione 94: whatis, agile, tech, contact, segment 88 */
    --font-size-display-hero: clamp(
        48px,
        27.58px + 5.446vw,
        106px
    ); /* H1 della home 236:389 (106) */
    --font-size-h2: clamp(
        32px,
        22.14px + 2.629vw,
        60px
    ); /* titoli di sezione 48-64 */
    --font-size-h3: clamp(
        18px,
        16.59px + 0.376vw,
        22px
    ); /* kicker e sottotitoli SemiBold 22 */
    --font-size-statement: clamp(
        26px,
        14.03px + 3.192vw,
        60px
    ); /* statement 236:411 / 236:1224 */
    --font-size-stat: clamp(44px, 26.04px + 4.789vw, 95px); /* cifre 236:1940 */
    --font-size-label-section: clamp(
        14px,
        11.89px + 0.563vw,
        20px
    ); /* etichette di sezione 236:469/470 */
    --line-height-statement: 1;
    --line-height-display: 0.9;

    /* --- Interlinee lette dal canale A (design context) dove il token non le fissa */
    --line-height-lead-figma: 1.2; /* Noto Sans Medium 18 lh 1.2, tutti i body del Figma */

    /* --- Colori campionati dal Figma (canale A) assenti nel content model */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-ink: #1a0b2e;
    --color-plum: #350c64; /* testo su fondo chiaro (il token ink #1A0B2E non compare nel Figma) */
    --color-card: #441c6f; /* schede, lastre e campi form su viola: bg + border rgba(255,255,255,.1) */
    --color-blue-1: #264981; /* card segmento 1 / pannello Preschool */
    --color-blue-2: #1e3962; /* card segmento 2 / Kids / card Cristina */
    --color-blue-3: #142847; /* card segmento 3 / Young Adult / card Alessio */
    --color-accent-text: #28a4da; /* accento dello statement e kicker su chiaro */
    --color-label-violet: #8d23ff; /* etichette di sezione su fondo chiaro */
    --color-stat-1: #f6edff;
    --color-stat-2: #eedeff;
    --color-stat-3: #e7d1ff;
    --color-stat-4: #e1c4ff;
    /* Inchiostro dei loghi monocromi (fascia home, muro studio). Lo stesso valore e' dentro il
       filtro duotono di template-parts/parts/logo-ink.php, che e' cio' che lo applica: qui sta
       per chi cerca il colore fra i token e per un'eventuale variante su fondo scuro. */
    --color-logo-ink: #2f253a;
    --color-line: rgba(255, 255, 255, 0.2);
    --color-line-soft: rgba(255, 255, 255, 0.1);
    --color-ink-muted: rgba(255, 255, 255, 0.6);
    --color-ink-soft: rgba(255, 255, 255, 0.7);
    --color-ink-faint: rgba(255, 255, 255, 0.4);
    --color-chip: rgba(255, 255, 255, 0.1);
    --color-chip-accent: rgba(100, 208, 255, 0.2);

    /* --- Layout (Figma: contenuto 1344 a 1440 con padding 48; il model dice 1360: SCOSTAMENTI) */
    --container: 1440px;
    --container-padding: clamp(20px, 3.3333vw, 48px);
    --grid-gap: var(--space-md);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 20px;
    --radius-xl: 40px;
    --radius-pill: 30px;
    --section-gap: clamp(
        var(--space-2xl),
        6.6667vw,
        var(--space-3xl)
    ); /* ritmo verticale 64→96 */
    --header-height: 88px;
    --header-height-pinned: 64px;
    --header-nav-gap: 36px; /* Figma 236:393: passo fra voci nav, CTA e lingua */

    /* --- Motion (dai preset del content model) */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* power2.out */
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); /* power2.inOut */
    --dur-state: 160ms;
    --dur-header: 280ms;
    --marquee-duration: 40s;

    /* --- Alias semantici: le sezioni chiare e scure li ribaltano con una classe (base.css) */
    --bg: var(--color-paper);
    --fg: var(--color-plum);
    --fg-muted: var(--color-plum);
    --fg-accent: var(--color-accent-text);
    --fg-label: var(--color-label-violet);
    --line: rgba(53, 12, 100, 0.15);
}