:root {
  /* Brand DEM */
  --color-primary: #4890D0;
  --color-primary-hover: #3A78B5;
  --color-secondary: #283848;
  /* Triplette RGB AFFIANCATE (mai cambiare il formato delle var sopra: sono
     usate dirette come `var(--color-primary)` in CSS scritto a mano).
     Servono a Tailwind per l'opacità dopo lo slash (`bg-dem-azzurro/10`):
     con l'hex opaco la classe non veniva proprio generata e ~225 punti in
     61 template rendevano trasparenti — vedi base.html `tailwind.config`
     e playbook_ui_iteration.md §Tailwind CDN + custom color. */
  --color-primary-rgb: 72 144 208;
  --color-secondary-rgb: 40 56 72;
  --color-surface: #FFFFFF;
  --color-surface-secondary: #F8FAFC;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* Tipografia — un carattere UI intenzionale (no font di sistema) */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* Scala tipografica modulare, base 16 (playbook_ui_standard §Fondazione).
     Il pavimento e' 12px e vale solo per i badge funzionali; ogni testo che
     serve a DECIDERE sta a --text-sm o sopra. Prima di questa scala i valori
     nascevano a occhio nel template: sulla Scuola erano 405 nodi a 12px,
     misurati sul banco il 2026-08-17 (carta #2678). */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 19px;
  --text-lg: 23px;
  --text-xl: 28px;

  /* Scala di spazio 4/8 (playbook_ui_standard §Fondazione): in un componente
     nuovo non si scrivono px liberi, si pesca da qui. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Bersaglio minimo per un gesto sul telefono. Non e' una preferenza: la
     Scuola si firma anche da telefono (criterio 3, #2678) e oggi 30 dei 31
     elementi cliccabili stanno sotto — «Scarta» a 29px, l'apertura del diff
     a 20px. */
  --touch-min: 44px;

  /* Superficie incassata: il fondo di un blocco che sta DENTRO una card
     (il riquadro del diff). Slate, non la sabbia del mockup: la Centrale e'
     azzurro DEM su slate, e la Scuola non e' un prodotto a parte. */
  --color-surface-sunk: #F1F5F9;

  /* Fondo e inchiostro dei toni semantici: `--color-warning` da solo è il
     colore del SEGNO, non serve a vestire un badge (ci vuole la coppia, o
     chi lo usa si scrive gli hex a mano).
     Le tre coppie sono complete perché il verdetto RT ha tre classi chiuse
     (`go` / `wait` / `no`) e la scheda immobile le veste tutte e tre: con la
     sola ambra le altre due sarebbero tornate hex a mano. L'inchiostro è
     scuro apposta — `--color-success` (#10B981) sul bianco sta a 2,5:1 e non
     regge nemmeno la soglia del testo grande. */
  --color-warning-bg: #FEF3C7;
  --color-warning-ink: #92400E;
  --color-success-bg: #D1FAE5;
  --color-success-ink: #065F46;
  --color-error-bg: #FEE2E2;
  --color-error-ink: #991B1B;

  /* Diff prima→dopo (carta #2678, criterio 1). Colori per RUOLO: il verso
     del cambiamento, non «verde» e «rosso». Il fondo tenue tiene la riga,
     l'accento accende le sole parole cambiate (`kb_diff_parole`). Niente
     token per la barratura: sul testo rimosso non si usa (Paolo, esplicito). */
  --diff-del-bg: #FEF0EF;
  --diff-del-accent: #F8CFCB;
  --diff-del-ink: #8A271E;
  --diff-add-bg: #EAF7EF;
  --diff-add-accent: #BFE8CB;
  --diff-add-ink: #14602F;

  /* Spacing/layout */
  --sidebar-width: 240px;
  --navbar-height: 64px;

  /* Transizioni */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

html.dark {
  --color-surface: #0F172A;
  --color-surface-secondary: #1E293B;
  --color-border: #334155;
  --color-text: #F8FAFC;
  --color-text-muted: #94A3B8;
  /* Scala e bersaglio non cambiano col tema: cambiano solo i colori. */
  --color-surface-sunk: #1E293B;
  --color-warning-bg: #3B2F0B;
  --color-warning-ink: #FCD34D;
  --color-success-bg: #062B21;
  --color-success-ink: #6EE7B7;
  --color-error-bg: #3B1214;
  --color-error-ink: #FCA5A5;
  --diff-del-bg: #3B1F1D;
  --diff-del-accent: #6E2E27;
  --diff-del-ink: #FCA5A5;
  --diff-add-bg: #12301F;
  --diff-add-accent: #1E5637;
  --diff-add-ink: #86EFAC;
}