/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — variabili --ui-* (SPEC-interfaccia §2) e variabili di Bootstrap ricondotte ai token.
   È l'unico file con valori esadecimali, misure e famiglie di font: ui.css, app.css e sito.css usano
   soltanto var(--ui-…). Il restyling di M13 (nome, logo, colori definitivi) cambia solo questo file.
   Tema chiaro in :root; tema scuro dell'amministrazione con data-area="admin" sull'elemento html.
   ══════════════════════════════════════════════════════════════════════════ */

/* Font: Inter e Source Serif 4, versioni variabili, serviti dal repository (licenze OFL accanto ai file).
   Nessun caricamento da servizi esterni. Gli stessi file servono al PDF della relazione (M8). */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4Variable-Roman.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4Variable-Italic.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ── Famiglie ── */
    --ui-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ui-font-serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
    --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ── Scala tipografica (rem, base del browser 16 px) ── */
    --ui-fs-1: 0.75rem;
    --ui-fs-2: 0.8125rem;
    --ui-fs-3: 0.9375rem;
    --ui-fs-4: 1.0625rem;
    --ui-fs-5: 1.25rem;
    --ui-fs-6: 1.625rem;
    --ui-fs-7: 2.25rem;
    --ui-fs-8: 3rem;
    --ui-fs-9: 3.75rem;
    --ui-fw-normal: 400;
    --ui-fw-label: 600;
    --ui-fw-title: 700;
    --ui-fw-brand: 800;
    --ui-lh-tight: 1.2;
    --ui-lh-body: 1.5;
    --ui-lh-text: 1.6;
    --ui-tracking-caps: 0.07em;
    --ui-tracking-tight: -0.01em;
    --ui-tracking-display: -0.02em;

    /* ── Spazi ── */
    --ui-sp-1: 4px;
    --ui-sp-2: 8px;
    --ui-sp-3: 12px;
    --ui-sp-4: 16px;
    --ui-sp-5: 24px;
    --ui-sp-6: 32px;
    --ui-sp-7: 48px;
    --ui-sp-8: 72px;
    --ui-sp-9: 112px;

    /* ── Angoli, filetti, ombre ── */
    --ui-radius-1: 4px;
    --ui-radius-2: 8px;
    --ui-radius-pill: 999px;
    --ui-line: 1px;
    --ui-line-2: 2px;
    --ui-focus-w: 3px;
    --ui-focus-offset: 2px;
    --ui-shadow-1: 0 1px 2px rgba(27, 29, 31, 0.06);
    --ui-shadow-2: 0 8px 28px rgba(27, 29, 31, 0.14);
    --ui-shadow-3: 0 24px 60px rgba(10, 59, 70, 0.22);
    --ui-radius-3: 16px;
    --ui-line-3: 4px;
    --ui-scrim: rgba(27, 29, 31, 0.55);

    /* ── Misure ── */
    --ui-logo-h: 24px;
    --ui-logo-h-l: 32px;
    --ui-sidebar-w: 248px;
    --ui-content-max: 1200px;
    --ui-measure: 62ch;
    --ui-control-h: 40px;
    --ui-control-h-sm: 32px;
    --ui-control-h-touch: 44px;
    --ui-col-s: 460px;
    --ui-col-m: 620px;
    --ui-col-l: 760px;
    --ui-w-xs: 8rem;
    --ui-w-s: 12rem;
    --ui-w-m: 16rem;
    --ui-w-menu: 15rem;
    --ui-w-piede: 14rem;
    --ui-w-pagina: 11rem;
    --ui-w-figura: 64rem;
    --ui-w-illustrazione: 420px;
    --ui-w-illustrazione-s: 320px;
    --ui-w-carta: 17rem;
    --ui-w-carta-s: 13rem;
    --ui-icona: 48px;
    --ui-icona-s: 20px;
    --ui-disco: 56px;
    --ui-disco-l: 420px;
    --ui-h-apertura: 35rem;
    --ui-h-figura: 15rem;
    --ui-h-fascia: 22rem;
    --ui-sposta: 24px;

    /* ── Movimento e livelli ── */
    --ui-dur: 150ms;
    --ui-dur-2: 500ms;
    --ui-dur-giro: 9000ms;
    --ui-z-laterale: 200;
    --ui-z-velo: 150;
    --ui-z-barra: 100;
    --ui-z-modale: 2000;
    --ui-z-rete: 2100;

    /* ── Colore: tema chiaro (clienti: azienda e studio) ── */
    --ui-primary: #0E4D5B;
    --ui-primary-strong: #0A3B46;
    --ui-primary-tint: #E3EEF0;
    --ui-on-primary: #FFFFFF;
    --ui-page: #F6F4EF;
    --ui-surface: #FFFFFF;
    --ui-surface-2: #ECE9E2;
    --ui-ink: #1B1D1F;
    --ui-ink-2: #4A4F55;
    --ui-ink-3: #646A71;
    --ui-border: #DAD7CF;
    --ui-border-strong: #8E8A80;
    --ui-warn: #7A4E00;
    --ui-warn-tint: #FBF1DC;
    --ui-danger: #A4262C;
    --ui-danger-tint: #FBE9E9;
    --ui-on-danger: #FFFFFF;
    --ui-context: #1B1D1F;
    --ui-on-context: #FFFFFF;

    /* ── Sito pubblico (reimpostazione del 14 novembre 2026): accento ambra, petrolio a due toni per le fasce piene ──
       Contrasti: inchiostro su ambra 9,0:1; ambra su petrolio 4,6:1 (solo titoli grandi, numeri e filetti);
       accento-inchiostro su carta 6,4:1; testo secondario su petrolio 7,0:1. */
    --ui-accent: #E5A823;
    --ui-accent-strong: #C4880A;
    --ui-accent-tint: #FCF3DD;
    --ui-accent-ink: #7A4E00;
    --ui-on-accent: #1B1D1F;
    --ui-primary-2: #16697A;
    --ui-on-primary-2: #CFE2E6;
    --ui-on-primary-line: #3F7682;

    /* ── Barra laterale (decisione di Claudio, 5 ottobre 2026: petrolio pieno nell'area clienti) ──
       Contrasti: testo 9,4:1, testo secondario 7,0:1, voce attiva 8,6:1, filetti 3,3:1. */
    --ui-side-bg: #0E4D5B;
    --ui-side-ink: #FFFFFF;
    --ui-side-ink-2: #CFE2E6;
    --ui-side-border: #6FA0AA;
    --ui-side-hover: #0A3B46;
    --ui-side-attiva-bg: #F6F4EF;
    --ui-side-attiva-ink: #0E4D5B;

    /* ── Bootstrap ricondotto ai token (restano di Bootstrap griglia, utilità e JavaScript) ── */
    --bs-body-font-family: var(--ui-font-sans);
    --bs-body-font-size: var(--ui-fs-3);
    --bs-body-line-height: var(--ui-lh-body);
    --bs-body-color: var(--ui-ink);
    --bs-body-bg: var(--ui-page);
    --bs-emphasis-color: var(--ui-ink);
    --bs-secondary-color: var(--ui-ink-2);
    --bs-heading-color: var(--ui-ink);
    --bs-border-color: var(--ui-border);
    --bs-border-radius: var(--ui-radius-1);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-strong);
    --bs-primary: var(--ui-primary);
    --bs-danger: var(--ui-danger);
    --bs-warning: var(--ui-warn);
}

/* ── Tema scuro dell'amministrazione (SPEC-interfaccia §2.2): stessi token, nessuna regola nei componenti ── */
[data-area="admin"] {
    color-scheme: dark;
    --ui-page: #14181B;
    --ui-surface: #1D2327;
    --ui-surface-2: #2A3136;
    --ui-ink: #F2F1EC;
    --ui-ink-2: #C4C8CC;
    --ui-ink-3: #9AA1A8;
    --ui-border: #353D43;
    --ui-border-strong: #7B848C;
    --ui-primary: #7FC4D2;
    --ui-primary-strong: #A3D8E2;
    --ui-on-primary: #0B2A31;
    --ui-primary-tint: #173A43;
    --ui-warn: #F0C36A;
    --ui-warn-tint: #3A2E12;
    --ui-danger: #F19A9E;
    --ui-danger-tint: #3F1A1C;
    --ui-on-danger: #14181B;
    --ui-context: #F2F1EC;
    --ui-on-context: #1B1D1F;
    --ui-accent: #E5A823;
    --ui-accent-strong: #F0C36A;
    --ui-accent-tint: #3A2E12;
    --ui-accent-ink: #F0C36A;
    --ui-on-accent: #1B1D1F;
    --ui-primary-2: #16697A;
    --ui-on-primary-2: #CFE2E6;
    --ui-on-primary-line: #3F7682;
    --ui-side-bg: #1D2327;
    --ui-side-ink: #F2F1EC;
    --ui-side-ink-2: #9AA1A8;
    --ui-side-border: #353D43;
    --ui-side-hover: #2A3136;
    --ui-side-attiva-bg: #173A43;
    --ui-side-attiva-ink: #7FC4D2;
    --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ui-shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5);
    --ui-scrim: rgba(0, 0, 0, 0.65);
}