/* ============================================================================
 * Design tokens — bacheca-regionale
 *
 * Fonte di verita: site-output/design-direction.md (sezioni Typography, Color
 * Palette, Motion & Spacing System). Ogni valore qui dentro viene da li.
 *
 * REGOLA: nessun componente puo' scrivere un colore, una durata o una curva
 * in chiaro. Se un valore serve e non e' qui, si aggiunge qui.
 *
 * Vincoli AGID (requisiti DEVE, 4.5 Az.2 e 4.6 Az.2):
 *  - font istituzionali serviti dal proprio dominio, nessun CDN esterno
 *  - Blu Italia #0066CC come primario del tema light (canonico per l'audit)
 *  - spaziature multiple di 4px, griglia a 12 colonne
 * ========================================================================== */

/* ── Font self-hosted ─────────────────────────────────────────────────────
 * Nessuna richiesta verso fonts.googleapis.com o Bunny: l'applicazione e'
 * interamente post-login e non deve aprire connessioni a terze parti.
 * `font-display: swap` evita il testo invisibile durante il caricamento.
 */

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/titillium-web-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/titillium-web-400-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/titillium-web-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/titillium-web-600-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/titillium-web-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/titillium-web-700-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lora-400-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lora-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/lora-700-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-mono-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Token indipendenti dal tema ──────────────────────────────────────────
 * Tipografia, spaziature, movimento e forma non cambiano fra light e dark.
 */

:root {
  /* famiglie */
  --font-display: "Titillium Web", system-ui, sans-serif;
  --font-body: "Titillium Web", system-ui, sans-serif;
  --font-editorial: "Lora", Georgia, serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  /* scala tipografica — scala fissa del Design System Italia resa fluida */
  --text-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --text-h2: clamp(1.75rem, 1.5rem + 1vw, 2rem);
  --text-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
  --text-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --text-body: 1rem;
  --text-label: 0.875rem;
  --text-caption: 0.75rem;

  --leading-display: 1.2;
  --leading-body: 1.6;
  --leading-editorial: 1.7;
  --tracking-display: -0.01em;
  --tracking-caption: 0.02em;

  /* misura di riga massima sul corpo del contenuto — regola tipografica AGID */
  --measure-content: 68ch;

  /* spaziature — multipli di 4px, vincolo del Design System */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 2.5rem;
  --space-xxl: 3rem;

  /* ritmo verticale di sezione — alternato, mai tre volte lo stesso */
  --space-section-compact: 2rem;
  --space-section-standard: 3rem;
  --space-section-generous: 4rem;

  /* griglia a 12 colonne */
  --grid-gutter: 0.75rem;
  --grid-margin: 0.75rem;
  --container-max: 78rem;

  /* curve — --ease-standard e' la curva misurata sulle pagine Apple */
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* durate */
  --duration-micro: 160ms;
  --duration-overlay-in: 200ms;
  --duration-overlay-out: 160ms;
  --duration-entrance: 240ms;
  --stagger-child: 0ms;

  /* forma — `--radius` e' il token che i componenti shadcn derivano */
  --radius: 0.25rem;
  --radius-control: 4px;
  --radius-card: 8px;
  --focus-ring-width: 3px;

  /* target touch minimo — WCAG 2.1 AA + vincolo del brief */
  --touch-target-min: 44px;

  /* altezza della testata sticky, serve a scroll-margin-top sulle ancore */
  --header-offset: 3rem;
}

@media (min-width: 768px) {
  :root {
    --grid-gutter: 1.5rem;
    --grid-margin: 1.5rem;
  }
}

/* ── Tema light — riferimento canonico dell'audit AGID ────────────────────
 *
 * I nomi seguono la convenzione shadcn/ui (`--background`, `--primary`,
 * `--muted`, `--sidebar`...). È una deviazione dichiarata rispetto ai nomi
 * `--color-*` della design direction, e ha una ragione precisa: Tailwind 4
 * possiede il namespace `--color-*`, quindi `@theme inline { --color-primary:
 * var(--color-primary) }` sarebbe auto-referenziale e il browser scarterebbe
 * il valore. Adottare i nomi shadcn significa che `pnpm dlx shadcn add <x>`
 * produce componenti che funzionano senza ricablaggio — e la dashboard ne userà
 * molti (tabelle, dialog, select, toast, command).
 *
 * I VALORI restano quelli della design direction, nessuno escluso. Gli alias
 * `--color-*` in fondo al file mantengono utilizzabili i nomi originali.
 *
 * Contrasti su --background:
 *   primary 5.56:1 · event 4.58:1 · foreground 15.3:1 · muted-foreground 4.87:1
 *   destructive 4.72:1 · warning 3.15:1 → NON su testo normale (solo >=24px,
 *   bordi, icone; lo stato Bozza porta sempre anche l'etichetta testuale)
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* ── Due livelli di superficie, non uno ────────────────────────────────
   * Il fondo di pagina e' la superficie AGID `#F5F7F9`, le card sono bianche.
   * La differenza e' minima ma fa tutto il lavoro: con fondo e card entrambi
   * bianchi una card non esiste — resta un bordo grigio attorno al nulla, ed
   * e' il difetto che rende piatta qualunque dashboard. Con il fondo appena
   * tinto, la card sale.
   *
   * Non e' una deroga al canone AGID: `#F5F7F9` e' gia' la superficie
   * dichiarata nella design direction, qui viene solo usata dove serve. Il
   * contrasto regge: foreground 14.3:1, muted-foreground 4.8:1, primary
   * 5.2:1 — tutti sopra AA su questo fondo.
   *
   * Nel tema scuro la relazione e' identica e gia' corretta: fondo `#0F1721`,
   * card `#182634` piu' chiara. È il motivo per cui una card bianca in tema
   * scuro sarebbe sbagliata — non serve a separare, acceca.
   */
  --background: #f5f7f9;
  --foreground: #262626;

  --card: #ffffff;
  --card-foreground: #262626;
  --popover: #ffffff;
  --popover-foreground: #262626;

  /* Blu Italia */
  --primary: #0066cc;
  --primary-foreground: #ffffff;
  --primary-hover: #00549f;

  /* Ora che il fondo e' tinto, `muted` deve staccarsi da lui e non piu' dal
   * bianco: con lo stesso valore del background sparirebbe. */
  --secondary: #eaeff4;
  --secondary-foreground: #262626;
  --muted: #eaeff4;
  --muted-foreground: #5c6f82;
  /* `accent` in shadcn e' la superficie di hover, non un colore d'accento. */
  --accent: #e6ecf2;
  --accent-foreground: #0066cc;

  --destructive: #cc334d;
  --destructive-foreground: #ffffff;

  /* Un grado piu' marcato del `#E6ECF2` della palette: su fondo bianco
   * bastava, su fondo `#F5F7F9` un bordo troppo tenue non separa piu'. */
  --border: #d9e2ec;
  --input: #d9e2ec;
  --ring: #0066cc;

  /* ── Estensioni di dominio ──────────────────────────────────────────── */

  /* Verde istituzionale: distingue un EVENTO da un ARTICOLO a colpo d'occhio
   * nella vista mista "Ultimi caricati". */
  --event: #008055;
  --event-foreground: #ffffff;
  --event-hover: #00664a;

  --warning: #cc7a00;
  --success: #008055;

  /* Fasce dell'header istituzionale. Sono token a se' perche' nel tema scuro
   * non possono derivare dal primario, che li' e' schiarito e darebbe una
   * testata piu' chiara del contenuto.
   * Contrasti: bianco su #00549f = 7.4:1 · bianco su #0066cc = 5.56:1 */
  --header-slim: #00549f;
  --header-slim-foreground: #ffffff;
  --header-center: #0066cc;
  --header-center-foreground: #ffffff;

  /* ── Barra laterale della dashboard: blu notte in ENTRAMBI i temi ──────
   * È la scelta visiva che distingue il back-office dal sito, ed e' presa dal
   * riferimento indicato dall'utente (progetto siarx): la barra resta scura
   * anche a tema chiaro. Tre ragioni, non una preferenza:
   *   - separa lo strumento dalla pagina senza una riga di bordo in piu';
   *   - la navigazione non compete con il contenuto per l'attenzione;
   *   - il blu notte deriva dalla famiglia del Blu Italia, quindi la dashboard
   *     resta parente della testata istituzionale invece di sembrare un'altra
   *     applicazione.
   * Contrasti verificati: testo `#E8EDF2` su `#0F2B46` = 12.1:1,
   * su voce attiva `#1B4570` = 8.3:1, accento `#9CC9F7` su `#1B4570` = 5.7:1.
   */
  --sidebar: #0f2b46;
  --sidebar-foreground: #e8edf2;
  --sidebar-primary: #9cc9f7;
  --sidebar-primary-foreground: #0f2b46;
  --sidebar-accent: #1b4570;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #1b4570;
  --sidebar-ring: #9cc9f7;

  --shadow-sm: 0 1px 2px rgb(38 38 38 / 0.06);
  --shadow-md: 0 4px 12px rgb(38 38 38 / 0.1);
  --shadow-lg: 0 8px 24px rgb(38 38 38 / 0.14);
}

/* ── Tema dark — enhancement derivato dal blu istituzionale ───────────────
 * Ogni token e' schiarito quanto basta a superare AA su --background:
 *   primary 6.8:1 · event 7.1:1 · foreground 13.1:1 · muted-foreground 7.4:1
 *   destructive 6.9:1
 * Le ombre nere non separano su fondo scuro: la profondita' la fa `--card`,
 * piu' chiaro dello sfondo.
 */

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #0f1721;
  --foreground: #e8edf2;

  --card: #182634;
  --card-foreground: #e8edf2;
  --popover: #182634;
  --popover-foreground: #e8edf2;

  --primary: #5ca9f5;
  --primary-foreground: #0f1721;
  --primary-hover: #8cc4f8;

  --secondary: #182634;
  --secondary-foreground: #e8edf2;
  --muted: #182634;
  --muted-foreground: #a3b4c6;
  --accent: #1f2f40;
  --accent-foreground: #5ca9f5;

  --destructive: #f08095;
  --destructive-foreground: #0f1721;

  --border: #2a3b4d;
  --input: #2a3b4d;
  --ring: #5ca9f5;

  --event: #4fbf8b;
  --event-foreground: #0f1721;
  --event-hover: #7ed3ab;

  --warning: #e0a04a;
  --success: #4fbf8b;

  /* Nel tema scuro la gerarchia della testata si inverte: la fascia slim e' la
   * superficie piu' profonda, non la piu' satura.
   * Contrasti: #e8edf2 su #0b1119 = 15.6:1 · #e8edf2 su #182634 = 12.4:1 */
  --header-slim: #0b1119;
  --header-slim-foreground: #e8edf2;
  --header-center: #182634;
  --header-center-foreground: #e8edf2;

  --sidebar: #0b1119;
  --sidebar-foreground: #e8edf2;
  --sidebar-primary: #5ca9f5;
  --sidebar-primary-foreground: #0f1721;
  --sidebar-accent: #182634;
  --sidebar-accent-foreground: #5ca9f5;
  --sidebar-border: #2a3b4d;
  --sidebar-ring: #5ca9f5;

  --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
}

/* Rete di sicurezza: se lo script pre-hydration non ha potuto scrivere
 * `data-theme` (JavaScript disattivato), decide il sistema operativo. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --background: #0f1721;
    --foreground: #e8edf2;
    --card: #182634;
    --card-foreground: #e8edf2;
    --popover: #182634;
    --popover-foreground: #e8edf2;
    --primary: #5ca9f5;
    --primary-foreground: #0f1721;
    --primary-hover: #8cc4f8;
    --secondary: #182634;
    --secondary-foreground: #e8edf2;
    --muted: #182634;
    --muted-foreground: #a3b4c6;
    --accent: #1f2f40;
    --accent-foreground: #5ca9f5;
    --destructive: #f08095;
    --destructive-foreground: #0f1721;
    --border: #2a3b4d;
    --input: #2a3b4d;
    --ring: #5ca9f5;
    --event: #4fbf8b;
    --event-foreground: #0f1721;
    --event-hover: #7ed3ab;
    --warning: #e0a04a;
    --success: #4fbf8b;
    --header-slim: #0b1119;
    --header-slim-foreground: #e8edf2;
    --header-center: #182634;
    --header-center-foreground: #e8edf2;
    --sidebar: #0b1119;
    --sidebar-foreground: #e8edf2;
    --sidebar-primary: #5ca9f5;
    --sidebar-primary-foreground: #0f1721;
    --sidebar-accent: #182634;
    --sidebar-accent-foreground: #5ca9f5;
    --sidebar-border: #2a3b4d;
    --sidebar-ring: #5ca9f5;
    --shadow-sm: 0 0 0 1px rgb(255 255 255 / 0.04);
    --shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

/* ── Alias con i nomi della design direction ──────────────────────────────
 * `site-output/design-direction.md` dichiara la palette come `--color-primary`,
 * `--color-background`, ecc. Quei nomi restano validi e utilizzabili nei valori
 * arbitrari (`text-[var(--color-primary)]`): qui sono alias del token
 * corrispondente, non una seconda fonte di verita'.
 */

:root {
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-on-primary: var(--primary-foreground);
  --color-background: var(--background);
  --color-surface: var(--muted);
  --color-surface-raised: var(--card);
  --color-text: var(--foreground);
  --color-muted: var(--muted-foreground);
  --color-border: var(--border);
  --color-accent: var(--event);
  --color-on-accent: var(--event-foreground);
  --color-danger: var(--destructive);
  --color-warning: var(--warning);
  --color-success: var(--success);
}

/* ── Rispetto di prefers-reduced-motion ───────────────────────────────────
 * Con tier `minimal` costa zero: nessuna informazione e' veicolata dal
 * movimento, quindi azzerarlo non toglie nulla all'utente.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}