/* Token «Vexto light» — misure in DIRECTION.md §2–4. Light è l'app; dark = Vexto originale. */
:root {
  --bg: #F1F1EF;
  --card: #FFFFFF;
  --card-2: #F6F6F4;
  --fg: #0C0C0C;
  --muted: #6A6A6A;
  --muted-2: #A8A8A5;
  --line: #D6D6D2;
  --band: #E9E9E6;
  --accent: #F39444;        /* Attention (Vexto #F39444) — solo superfici/barre/cursori */
  --accent-text: #9A5100;   /* AA anche su --accent-soft */
  --accent-soft: #FDEBDC;
  --ok: #187536;
  --ok-icon: #5EC557;       /* Operational (Vexto) */
  --ok-soft: #E4F4E6;
  --bad: #CC2A22;
  --bad-icon: #FF4747;      /* Critical (Vexto) */
  --bad-soft: #FBE3E1;
  --ink: #0C0C0C;
  --ink-fg: #FFFFFF;
  --ink-muted: #8E8E8E;
  --ink-card: #161616;
  --ink-line: #2A2A2A;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-dark: rgba(20, 20, 20, 0.55);
  /* v2 vetro Apple (DIRECTION-V2 §4) */
  --glass-sheet: rgba(255, 255, 255, 0.72);
  --glass-pill: rgba(255, 255, 255, 0.78);
  --hairline-in: rgba(255, 255, 255, 0.6);
  --hairline-out: rgba(0, 0, 0, 0.06);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.10);
  --shadow-pill: 0 8px 24px rgba(0, 0, 0, 0.12);
  --r-sheet: 1.5em;
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.08);
  --press: rgba(0, 0, 0, 0.05);

  --r-card: 1.5em;
  --r-card-sm: 1.25em;
  --gutter: 1em;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tabbar-h: 3.5em;
  --tabbar-space: calc(var(--tabbar-h) + 2em + var(--safe-bottom));
  --navbar-h: 3.5em;

  --font: "Helvetica Neue", Helvetica, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* durate */
  --d-press-in: 100ms;
  --d-press-out: 220ms;
  --d-nav: 320ms;
  --d-pop: 280ms;
  --d-fade: 200ms;
  --d-sheet: 300ms;

  color-scheme: light;
}

html[data-theme-status="dark"] {
  --bg: #0C0C0C;
  --card: #161616;
  --card-2: #1C1C1C;
  --fg: #FFFFFF;
  --muted: #8E8E8E;
  --muted-2: #5C5C5C;
  --line: #2A2A2A;
  --band: #181818;
  --accent-text: #F39444;
  --accent-soft: #2A1C10;
  --ok: #5EC557;
  --ok-soft: #10261A;
  --bad: #FF4747;
  --bad-soft: #2B1A1A;
  --glass: rgba(20, 20, 20, 0.55);
  --glass-strong: rgba(20, 20, 20, 0.78);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-sheet: rgba(24, 24, 24, 0.72);
  --glass-pill: rgba(24, 24, 24, 0.78);
  --hairline-in: rgba(255, 255, 255, 0.12);
  --hairline-out: rgba(0, 0, 0, 0.4);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
  --press: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}

/* Osmo dark-light: l'attributo è l'unica fonte; prefers-color-scheme viene applicato dallo store solo se theme=system */

/* v2: tab bar nascosta nei dettagli (router aggiunge html.no-tabbar): il contenuto e i bottoni fissi scendono */
html.no-tabbar { --tabbar-h: 0em; --tabbar-space: calc(1em + var(--safe-bottom)); }

/* Colori dei mezzi: tre tinte profonde, una per modo (forma + colore, mai solo colore).
   Lontane dal blu «sei qui» (#007AFF), dall'arancio ritardi/accento e dal giallo taxi. */
:root { --mode-bus: #1F5C46; --mode-train: #7D2632; --mode-lift: #1E5260; }