/* Elicria — token di design, v3 (25/09/2026): sfondo carta, Young Serif, Schibsted Grotesk,
   IBM Plex Mono, icone Phosphor light (scelte di Filippo).
   Tre strati: primitivi (colori di base) → semantici (ruoli) → alias di componente.
   I componenti usano solo semantici e alias. Il contratto è in PIANO-DESIGN-SYSTEM.md §4;
   le coppie testo/sfondo ammesse sono in check-contrast.py. */

/* Caratteri: tutti su file locali, mai da CDN. File già ridotti all'alfabeto latino. */
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* Young Serif e IBM Plex Mono hanno un solo peso: niente neretti o corsivi finti del browser */
:root { font-synthesis: none; }

:root {
  /* 1. Primitivi — solo esadecimali pieni, niente trasparenze (il controllo dei contrasti li legge) */
  --carta: #F4F0E3;
  --bianco: #FFFFFF;
  --inchiostro: #1E2419;
  --macchia: #26311F;
  --macchia-600: #34432B;
  --macchia-700: #3E4F34;
  --elicriso: #E0A526;
  --elicriso-300: #EDC266;
  --ocra: #8A5F0A;
  --ocra-700: #6B4906;
  --salvia: #A3AD98;
  --salvia-200: #D9DCCF;
  --salvia-100: #E6E8DD;
  --salvia-inverse: #B9C2AE;
  --lentisco: #56644F;
  --lentisco-inverse: #4A5842;
  --corbezzolo: #A63A26;
  --corbezzolo-100: #F5E1DB;
  --corbezzolo-300: #E8836F;
  --melograno: #A4521A;
  --melograno-100: #F6E7D8;
  --mirto: #3E6B46;
  --mirto-100: #E1ECDF;
  --rosmarino: #4F6596;
  --rosmarino-100: #E3E8F3;

  /* 2. Semantici — il contratto condiviso con i temi dei clienti */
  --color-canvas: var(--carta);
  --color-surface: var(--bianco);
  --color-text: var(--inchiostro);
  --color-text-muted: var(--lentisco);
  --color-action-bg: var(--macchia);
  --color-action-bg-hover: var(--macchia-600);
  --color-action-bg-active: var(--macchia-700);
  --color-action-text: var(--carta);
  --color-action-disabled-bg: var(--salvia-100);
  --color-action-disabled-text: var(--lentisco); /* WCAG esenta i controlli disattivati, ma restano leggibili */
  --color-link: var(--ocra);
  --color-link-hover: var(--ocra-700);
  /* Link visitati: stesso colore dei link, per scelta (nel pannello si torna spesso sulle stesse pagine) */
  --color-border: var(--salvia-200);
  --color-border-field: var(--lentisco);
  --color-border-field-error: var(--corbezzolo);
  --focus-color: var(--ocra);
  --focus-width: 2px;
  --focus-offset: 2px;

  --color-success-text: var(--mirto);      --color-success-bg: var(--mirto-100);      --color-success-border: var(--mirto);
  --color-warning-text: var(--melograno);  --color-warning-bg: var(--melograno-100);  --color-warning-border: var(--melograno);
  --color-danger-text: var(--corbezzolo);  --color-danger-bg: var(--corbezzolo-100);  --color-danger-border: var(--corbezzolo);
  --color-info-text: var(--rosmarino);     --color-info-bg: var(--rosmarino-100);     --color-info-border: var(--rosmarino);

  /* Vetro: superfici semitrasparenti con sfocatura di ciò che c'è dietro. Formato #RRGGBBAA.
     Il vetro sta solo sopra lo sfondo della pagina o sopra le "luci"; mai sopra foto o tabelle.
     check-contrast.py calcola il colore risultante sopra ciascuno di questi sfondi. */
  --color-glass-bg: #FFFDF7C7;
  --color-glass-border: #FFFFFFA6;
  --color-glass-bg-inverse: #26311FC2;
  --color-glass-border-inverse: #F4F0E329;
  /* Luci: macchie di colore sfumate dietro al vetro. Sopra una luce solo --color-text, mai altro testo */
  --color-glow-a: var(--elicriso);
  --color-glow-b: var(--salvia);

  /* Sezioni in negativo (fondo scuro). Si attivano con data-surface="inverse".
     Regola: niente etichette di stato (successo, avviso, errore, info) nelle sezioni in negativo. */
  --color-surface-inverse: var(--macchia);
  --color-surface-inverse-raised: var(--macchia-600);
  --color-text-inverse: var(--carta);
  --color-text-muted-inverse: var(--salvia-inverse);
  --color-link-inverse: var(--elicriso-300);
  --color-action-inverse-bg: var(--elicriso);
  --color-action-inverse-bg-hover: var(--elicriso-300);
  --color-action-inverse-bg-active: var(--elicriso-300);
  --color-action-disabled-inverse-bg: var(--lentisco-inverse);
  --color-action-disabled-inverse-text: var(--salvia);
  --color-action-inverse-text: var(--inchiostro);
  --color-border-inverse: var(--lentisco-inverse);
  --color-border-field-inverse: var(--salvia);
  --color-border-field-error-inverse: var(--corbezzolo-300);
  --focus-color-inverse: var(--elicriso);

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scala 1,25 su corpo 17 px. Young Serif ha un solo peso (400): i titoli restano a 400 */
  --text-display-size: clamp(2.1rem, 1.5rem + 3.6vw, 3.25rem); --text-display-line: 1.1; --text-display-weight: 400;
  --text-h1-size: 2.075rem;  --text-h1-line: 1.12; --text-h1-weight: 400;
  --text-h2-size: 1.66rem;   --text-h2-line: 1.18; --text-h2-weight: 400;
  --text-h3-size: 1.33rem;   --text-h3-line: 1.25; --text-h3-weight: 600;
  --text-body-size: 1.0625rem; --text-body-line: 1.5; --text-body-weight: 400;
  --text-label-size: 0.9375rem; --text-label-line: 1.35; --text-label-weight: 600;
  --text-small-size: 0.8125rem; --text-small-line: 1.4; --text-small-weight: 400;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  /* Forme: controlli completamente arrotondati, schede morbide */
  --radius-control: 999px;  /* bottoni, campi a riga singola, etichette */
  --radius-sm: 10px;        /* elementi interni: blocchi, campioni, riquadri piccoli */
  --radius-md: 20px;        /* schede e pannelli */
  /* Profondità: ombre calde, tinte d'inchiostro, mai nere */
  --shadow-raised: 0 1px 2px rgb(30 36 25 / 0.06), 0 10px 28px -12px rgb(30 36 25 / 0.18);
  --shadow-overlay: 0 18px 40px -12px rgb(30 36 25 / 0.30), 0 2px 6px rgb(30 36 25 / 0.10);
  --glass-blur: 18px;
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

}

/* 3. Alias di componente — lista chiusa, ognuno punta a un semantico.
   Vanno ridichiarati ovunque i semantici cambiano (tema cliente, negativo): una variabile
   che ne cita un'altra viene calcolata dove è dichiarata, non dove è usata. */
:root, [data-theme], [data-surface="inverse"] {
  --hero-bg: var(--color-canvas);
  --hero-text: var(--color-text);
  --card-bg: var(--color-surface);
  --glass-surface: var(--color-glass-bg);
}

/* Senza trasparenze: se il dispositivo le riduce o il browser non sfoca, il vetro diventa pieno */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme], [data-surface="inverse"] { --glass-surface: var(--color-surface); --glass-blur: 0px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, [data-theme], [data-surface="inverse"] { --glass-surface: var(--color-surface); --glass-blur: 0px; }
}

/* Una sezione in negativo rimappa i semantici sui loro gemelli "inverse":
   vale anche per i temi dei clienti, che definiscono i propri valori inverse. */
[data-surface="inverse"] {
  --color-canvas: var(--color-surface-inverse);
  --color-surface: var(--color-surface-inverse-raised);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--color-text-muted-inverse);
  --color-link: var(--color-link-inverse);
  --color-link-hover: var(--color-text-inverse);
  --color-action-bg: var(--color-action-inverse-bg);
  --color-action-bg-hover: var(--color-action-inverse-bg-hover);
  --color-action-bg-active: var(--color-action-inverse-bg-active);
  --color-action-disabled-bg: var(--color-action-disabled-inverse-bg);
  --color-action-disabled-text: var(--color-action-disabled-inverse-text);
  --color-action-text: var(--color-action-inverse-text);
  --color-border: var(--color-border-inverse);
  --color-border-field: var(--color-border-field-inverse);
  --color-border-field-error: var(--color-border-field-error-inverse);
  --focus-color: var(--focus-color-inverse);
  --color-glass-bg: var(--color-glass-bg-inverse);
  --color-glass-border: var(--color-glass-border-inverse);
  background: var(--color-canvas);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}