/* ============================================================
   DESIGN TOKENS - Fonderia BOA sito nuovo
   Estesi da Landing Bronzo (visual anchor locked).
   Sistema colore: OKLCH puro. Hue 50 = bronzo/neri caldi · Hue 70 = crema/bianchi.
   WHY tokenizzato più della landing: 60 pagine → un valore, un posto.
   ============================================================ */

:root {
    /* ---- Colori base (verbatim da Landing Bronzo) ---- */
    --bg:            oklch(99.5% 0.003 70);
    --surface:       oklch(97% 0.006 70);
    --border:        oklch(88% 0.008 70);
    --bronze:        oklch(50% 0.12 50);
    --bronze-dark:   oklch(40% 0.11 50);
    --bronze-light:  oklch(95% 0.018 70);
    --text-1:        oklch(18% 0.01 50);
    --text-2:        oklch(42% 0.01 50);
    --text-3:        oklch(50% 0.008 50);

    /* ---- Toni scuri (erano inline nella landing; tokenizzati per il ritmo chiaro<->scuro multi-pagina) ---- */
    --dark:          oklch(11% 0.012 50);   /* sezioni scure (hero-stats, form) */
    --dark-deep:     oklch(8% 0.01 50);     /* fondi piu profondi */
    --on-dark:       oklch(96% 0.003 70);   /* testo su scuro */
    --on-dark-2:     oklch(62% 0.008 50);   /* testo secondario su scuro - AA (>=4.5:1) su --dark/--dark-deep */
    --bronze-on-dark: oklch(72% 0.11 50);   /* bronzo leggibile su fondo scuro */
    --border-dark:   oklch(28% 0.01 50);

    /* ---- Stati semantici form (verbatim landing) ---- */
    --ok-bg:  oklch(96% 0.04 145);  --ok-border:  oklch(80% 0.08 145);  --ok-text:  oklch(35% 0.1 145);
    --err-bg: oklch(97% 0.035 15);  --err-border: oklch(82% 0.08 15);   --err-text: oklch(38% 0.1 15);

    /* ---- Colori componente (erano hardcoded in main.css → tokenizzati + fallback sRGB, R2) ---- */
    --on-bronze:          oklch(98% 0.003 70);          /* testo su bottone bronzo */
    --on-dark-strong:     oklch(100% 0 0);              /* bianco pieno - hover nav/switcher overlay */
    --btn-ghost-border:   oklch(18% 0.01 50 / 0.28);    /* bordo bottone ghost */
    --btn-ghost-border-h: oklch(18% 0.01 50 / 0.45);    /* hover */
    --overlay-tint:       oklch(100% 0 0 / 0.12);       /* bg hover switcher su hero */
    --scrim:              oklch(0% 0 0 / 0.45);         /* velo scuro sotto header overlay - contrasto testo bianco garantito su hero di QUALSIASI luminosita */

    /* ---- Tipografia (aderenza totale Landing Bronzo - Opz.1, Sess.12) ----
       La landing usa UN sistema minimale: Georgia sui titoli (body serif), Arial su UI/body,
       Playfair Display SOLO sul numero-watermark decorativo. Fraunces rimosso: era una deriva
       cumulativa D2→D3 dall'ancora locked. Playfair è self-hosted (no fetch Google/GDPR). */
    --font-serif-display: Georgia, 'Times New Roman', serif; /* H1/.t-display - come landing (titoli ereditano Georgia dal body) */
    --font-display: Georgia, 'Times New Roman', serif;       /* H2/H3 - Georgia come landing */
    --font-ui:      Arial, Helvetica, sans-serif;            /* body/UI/nav/form - come landing */
    --font-accent:  'Playfair Display', Georgia, serif;      /* numero-watermark decorativo - come .spec-num della landing (self-hosted) */

    --fs-display: clamp(2rem, 5vw, 4.2rem);     /* fluido */
    --fs-heading: clamp(1.9rem, 3.5vw, 2.8rem); /* fluido */
    --fs-h3:      clamp(1.3rem, 2vw, 1.6rem);   /* fluido */
    --fs-body:    1rem;       /* fisso 16px - body, input */
    --fs-ui:      0.9rem;     /* fisso 14.4px - nav, bottoni, footer-nav (era hardcoded 0.9rem in 3 punti) */
    --fs-small:   0.875rem;   /* fisso 14px - label, legal, switcher */
    --fs-label:   0.875rem;   /* fisso 14px (era 14px px → rem: coerenza scala + scaling accessibilita) */

    --lh-tight:   1.1;
    --lh-heading: 1.2;
    --lh-body:    1.7;
    --lh-prose:   1.65;

    --ls-display: -0.035em;   /* Georgia a display size - tracking stretto verbatim da .t-display della landing */
    --ls-heading: -0.022em;   /* verbatim da .t-heading della landing */
    --ls-label:   0.08em;   /* uppercase tracking */

    /* ---- Spacing scale (dai pattern ricorrenti della landing) ---- */
    --space-2xs: 0.4rem;
    --space-xs:  0.6rem;
    --space-sm:  0.8rem;
    --space-md:  1.25rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --section-y: clamp(4rem, 8vw, 7rem);   /* ritmo verticale sezioni */

    /* ---- Layout ---- */
    --container:       1240px;
    --container-prose: 720px;   /* ~72-78ch a 1rem/Arial - pagine storytelling (storia, sociale) */
    --container-narrow: 560px;  /* form (720 troppo largo per campi) */
    --container-pad:   clamp(1.25rem, 4vw, 3rem);

    /* ---- Radius (2 livelli: scala ridotta da 4 dopo review - differenze <=1px indistinguibili) ---- */
    --radius:     6px;   /* bottoni, input, card, message box */
    --radius-sm:  3px;   /* pill lingua, badge, piccoli elementi */

    /* ---- Motion ---- */
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --dur-fast:  0.2s;
    --dur-mid:   0.35s;
    --dur-slow:  0.65s;
    --dur-draw:  1.1s;   /* line-draw firma (.rule-draw, scaleX) - gesto deliberatamente lento */

    /* ---- Shadow / focus ---- */
    --shadow-btn:   inset 0 1px 0 oklch(70% 0.09 50 / 0.2), 0 1px 3px oklch(10% 0.01 50 / 0.18);
    --shadow-btn-h: inset 0 1px 0 oklch(70% 0.09 50 / 0.2), 0 8px 24px oklch(50% 0.12 50 / 0.38);
    --shadow-card:  0 12px 56px oklch(0% 0 0 / 0.38);
    --focus-ring:   0 0 0 3px oklch(50% 0.12 50 / 0.12);

    /* ---- Watermark numeri Playfair (.watermark-num) ---- */
    --watermark:        oklch(50% 0.12 50 / 0.07);  /* bronzo 7% - stato base */
    --watermark-strong: oklch(50% 0.12 50 / 0.13);  /* bronzo 13% - hover del contenitore (.watermark-host) */

    --header-bg: oklch(99.5% 0.003 70 / 0.9);   /* header sticky translucido - tokenizzato (era hardcoded) */
    --header-bg-solid: oklch(99.5% 0.003 70 / 0.98);   /* header quasi-opaco - mobile (blur disattivato per costo GPU) */
    --header-h: 68px;
    --z-header:   100;
    --z-dropdown: 150;
    --z-overlay:  200;
    --z-modal:    300;
    --z-toast:    400;
}

/* Fallback per browser senza OKLCH (Safari <15.4 / vecchi Android): sRGB approssimato. */
@supports not (color: oklch(50% 0.12 50)) {
    :root {
        --bg: #fdfcfb; --surface: #f5f3f1; --border: #ddd8d3;
        --bronze: #8a5a33; --bronze-dark: #6e4626; --bronze-light: #f2ece5;
        --text-1: #241f1b; --text-2: #5f574f; --text-3: #726a61;
        --dark: #1a1613; --dark-deep: #100d0b; --on-dark: #f4f1ee; --on-dark-2: #9a9188;
        --bronze-on-dark: #c39160; --border-dark: #3a332e;
        --ok-bg: #eaf6ee; --ok-border: #b9dcc4; --ok-text: #2f6b43;
        --err-bg: #fbeceb; --err-border: #e6bdb8; --err-text: #9a3b34;
        --shadow-btn:   inset 0 1px 0 rgba(196,150,96,0.2), 0 1px 3px rgba(26,22,19,0.18);
        --shadow-btn-h: inset 0 1px 0 rgba(196,150,96,0.2), 0 8px 24px rgba(138,90,51,0.38);
        --shadow-card:  0 12px 56px rgba(0,0,0,0.38);
        --focus-ring:   0 0 0 3px rgba(138,90,51,0.18);
        --header-bg:    rgba(253,252,251,0.9);
        --header-bg-solid: rgba(253,252,251,0.98);
        --watermark: rgba(138,90,51,0.07); --watermark-strong: rgba(138,90,51,0.13);
        --on-bronze: #fbf9f6; --on-dark-strong: #ffffff;
        --btn-ghost-border: rgba(36,31,27,0.28); --btn-ghost-border-h: rgba(36,31,27,0.45);
        --overlay-tint: rgba(255,255,255,0.12); --scrim: rgba(0,0,0,0.45);
    }
}