/* tokens.css — VilleoSolving
   UNICA fonte dei colori dell'applicazione (structure.md, regola 5).
   :root = tema chiaro · [data-theme="dark"] = tema scuro.
   Palette desaturate per principio di prodotto (PRD §4.4): nessun rosso/verde
   enfatico, gli esiti si comunicano con forma, posizione e testo. */

:root {
  /* Superfici */
  --color-bg: #f5f4f1;
  --color-bg-elevated: #fdfdfb;
  --color-bg-inset: #edebe6;
  --color-bg-session: #f0efeb;

  /* Testo */
  --color-text: #2c2b28;
  --color-text-soft: #6d6960;
  --color-text-faint: #98938a;
  --color-text-inverse: #f5f4f1;

  /* Bordi e separatori */
  --color-border: #d9d6cf;
  --color-border-strong: #b8b4ab;

  /* Interazione (slate desaturato) */
  --color-accent: #566070;
  --color-accent-hover: #46505e;
  --color-accent-soft: #e2e4e8;
  --color-on-accent: #f5f6f8;

  /* Stato e focus */
  --color-focus-ring: #4a5462;
  --color-selection: #dcdfe4;
  --color-dim-overlay: rgba(44, 43, 40, 0.45);

  /* Macchie e inneschi (seppia) */
  --color-blot-fg: #4a443c;
  --color-blot-bg: #efede8;

  /* Timeline (consumati da timeline-theme.css) */
  --color-tl-bar: #737d8c;
  --color-tl-bar-done: #9aa1ac;
  --color-tl-grid: #ddd9d2;

  /* Tipografia */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;
  --font-size-title: 1.5rem;
  --line-height-body: 1.6;

  /* Spazi */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Geometria */
  --radius-small: 6px;
  --radius-medium: 10px;
  --touch-target: 44px;
  --measure-reading: 72ch;
  --focus-column: 680px;

  /* Movimento (≤200 ms, PRD §4.4) */
  --transition-fast: 120ms ease;
  --transition-medium: 200ms ease;
}

[data-theme="dark"] {
  --color-bg: #1c1d1f;
  --color-bg-elevated: #252629;
  --color-bg-inset: #171819;
  --color-bg-session: #202124;

  --color-text: #e3e1da;
  --color-text-soft: #a5a198;
  --color-text-faint: #7a766e;
  --color-text-inverse: #1c1d1f;

  --color-border: #3a3b3e;
  --color-border-strong: #55565a;

  --color-accent: #929cab;
  --color-accent-hover: #a8b1bf;
  --color-accent-soft: #32363c;
  --color-on-accent: #1c1d1f;

  --color-focus-ring: #a3adbb;
  --color-selection: #3c4148;
  --color-dim-overlay: rgba(0, 0, 0, 0.55);

  --color-blot-fg: #c9c4ba;
  --color-blot-bg: #232420;

  --color-tl-bar: #7f8996;
  --color-tl-bar-done: #5c636d;
  --color-tl-grid: #34353a;
}