/* Design tokens GESTECH — sorgente di verità: il mockup Claude Design
   ("GESTECH standalone.html", blocco :root del template).
   I nomi del mockup sono i token primari; sotto restano gli alias storici
   (--ok/--danger/--accent-text/--border2…) così le viste già scritte
   ereditano la nuova palette senza essere riscritte. */

:root, :root[data-theme="light"] {
  /* superfici */
  --bg: #F4F4F2;
  --surface: #FFFFFF;
  --surface2: #EDEDEA;
  --sidebar: #EFEFEC;
  --row-hover: #F5F7FC;

  /* bordi */
  --border: #E1E1DC;
  --border-strong: #C9C9C2;

  /* testo */
  --text: #1A1C20;
  --text2: #585D66;
  --text3: #8C9099;

  /* accento */
  --accent: #2450C8;
  --accent-strong: #1C3FA0;
  --on-accent: #FFFFFF;
  --accent-soft: #E7EDFB;
  --accent-border: #C4D2F3;

  /* semantici */
  --pos: #177E4E;
  --pos-soft: #E1F1E8;
  --neg: #C2362B;
  --neg-soft: #F9E7E4;
  --warn: #9A5B08;
  --warn-soft: #F7ECD9;

  /* elevazione — il mockup è volutamente piatto */
  --shadow: 0 1px 2px rgba(20, 22, 26, .06);
  --shadow-lg: 0 12px 32px rgba(20, 22, 26, .14);
  --shadow-hover: 0 6px 18px rgba(20, 22, 26, .10);

  /* grafici — campiture aggiuntive per serie con più di 4 categorie (es. ambiti) */
  --chart-5: #7E5BEF;
  --chart-6: #0E8F8B;
  --chart-7: #C2447B;
  --chart-8: #6B7280;
}

:root[data-theme="dark"] {
  --bg: #131417;
  --surface: #1B1D21;
  --surface2: #22242A;
  --sidebar: #17181C;
  --row-hover: #20242E;

  --border: #2A2D33;
  --border-strong: #3A3E46;

  --text: #E9EAEC;
  --text2: #A4A8B0;
  --text3: #6E7278;

  --accent: #7E9AF3;
  --accent-strong: #A5B8F7;
  --on-accent: #0F1B3D;
  --accent-soft: #222E4E;
  --accent-border: #33436E;

  --pos: #4CC38A;
  --pos-soft: #15291F;
  --neg: #EE6D60;
  --neg-soft: #331C19;
  --warn: #E0A030;
  --warn-soft: #2E2513;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, .5);

  --chart-5: #A78BFA;
  --chart-6: #2DD4BF;
  --chart-7: #F472B6;
  --chart-8: #9CA3AF;
}

/* ---- Alias storici -------------------------------------------------------
   Risolti pigramente da var(): cambiando tema cambia il token primario e
   l'alias lo segue, quindi basta dichiararli una volta sola. */
:root {
  --ok: var(--pos);
  --ok-soft: var(--pos-soft);
  --danger: var(--neg);
  --danger-soft: var(--neg-soft);
  --info: var(--accent);
  --info-soft: var(--accent-soft);
  --accent-text: var(--on-accent);
  --border2: var(--border-strong);
  --surface3: var(--surface2);
  --neutral-soft: var(--surface2);

  /* grafici — campiture del mockup: barre accent + border-strong (anno
     corrente vs precedente), donut accent → pos → warn */
  --chart-1: var(--accent);
  --chart-2: var(--border-strong);
  --chart-3: var(--pos);
  --chart-4: var(--warn);

  /* geometria — 8px card, 5px controlli, 4px badge */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-xs: 4px;
  --radius-pill: 999px;

  --sidebar-w: 224px;
  --topbar-h: 48px;

  /* movimento — durate degli stati (hover/focus) e curve delle animazioni.
     `--ease-out` è la curva del mockup (cubic-bezier(.2,.85,.25,1)): la usano
     tutte le entrate in scena definite in css/motion.css. */
  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(.2, .6, .35, 1);
  --ease-out: cubic-bezier(.2, .85, .25, 1);

  /* durate delle entrate in scena (css/motion.css) */
  --t-view: 420ms;   /* la vista intera che entra a ogni cambio pagina */
  --t-rise: 500ms;   /* card e KPI che salgono, scaglionati */
  --t-chart: 700ms;  /* barre, anelli e contatori dei grafici */
}

/* Rispetta chi ha chiesto meno animazioni a livello di sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}