/* Flowmind design system: token. Fonte unica: il design system (tokens.json).
   Tema chiaro = "cielo" (data-theme="light"), tema scuro = "notte" (data-theme="studio").
   Non scrivere colori letterali altrove: usa queste variabili. */
:root, :root[data-theme="light"], :root[data-theme="cielo"] {
  --sky: #e7f0fc;
  --sky-cloud-a: rgba(128,173,243,0.35);
  --sky-cloud-b: rgba(131,219,207,0.32);
  --surface: #f6faff;
  --surface-sunken: #edf5ff;
  --surface-2: #e2edf9;
  --glass-card: rgba(255,255,255,0.40);
  --glass-panel: rgba(255,255,255,0.62);
  --glass-menu: rgba(255,255,255,0.90);
  --glass-edge: rgba(255,255,255,0.85);
  --line: #c1d3e9;
  --line-strong: #7288a8;
  --ink: #193457;
  --ink-soft: #4e6684;
  --ink-faint: #526b8c;
  --accent: #2f66b3;
  --accent-strong: #23538e;
  --accent-soft: #e0ecfc;
  --accent-top: #3a70bd;
  --on-accent: #ffffff;
  --focus: var(--accent);
  --flow-in: #1d7260;
  --flow-out: #98571c;
  --lever: var(--accent);
  --water: rgba(47,102,179,0.22);
  --cloud: #8fa6c4;
  --map-grid: rgba(83,135,186,0.09);
  --series-1: var(--accent);
  --series-2: #6c4fb0;
  --series-3: #856413;
  --success: var(--flow-in);
  --warning: #87600f;
  --danger: #a84135;
  --domain-natura: #2b7a52;
  --domain-salute: #a8436a;
  --domain-economia: #87600f;
  --domain-imprese: #3b5cb3;
  --domain-societa: #6c4fb0;
  --domain-quotidiana: #2f66b3;
  --shadow-rest: 0 6px 18px rgba(30,65,110,0.06);
  --shadow-panel: 0 18px 48px rgba(28,78,131,0.12);
  --shadow-float: 0 24px 60px rgba(36,72,130,0.14);
  --shadow-glint: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-accent: 0 8px 24px rgba(47,102,179,0.24);
  color-scheme: light;
}
:root[data-theme="studio"], :root[data-theme="dark"], :root[data-theme="notte"] {
  --sky: #080c1b;
  --sky-cloud-a: rgba(60,107,175,0.18);
  --sky-cloud-b: rgba(60,171,161,0.10);
  --surface: #101b30;
  --surface-sunken: #0b1224;
  --surface-2: #14253a;
  --glass-card: rgba(16,27,48,0.56);
  --glass-panel: rgba(16,27,48,0.76);
  --glass-menu: rgba(16,27,48,0.94);
  --glass-edge: rgba(139,184,245,0.16);
  --line: #293a53;
  --line-strong: #5d7396;
  --ink: #edf3fb;
  --ink-soft: #bbc6da;
  --ink-faint: #96a8c4;
  --accent: #8bb8f5;
  --accent-strong: #b0cdf8;
  --accent-soft: #16294a;
  --accent-top: #a3c6f7;
  --on-accent: #0b1a33;
  --focus: var(--accent);
  --flow-in: #70e0c4;
  --flow-out: #f2b27b;
  --lever: var(--accent);
  --water: rgba(139,184,245,0.24);
  --cloud: #5d7396;
  --map-grid: rgba(157,197,232,0.08);
  --series-1: var(--accent);
  --series-2: #c3b3f7;
  --series-3: #f2d291;
  --success: var(--flow-in);
  --warning: #f2d291;
  --danger: #ff9c9c;
  --domain-natura: #7fd6a8;
  --domain-salute: #f3a3c0;
  --domain-economia: #f2d291;
  --domain-imprese: #a9bdf5;
  --domain-societa: #c3b3f7;
  --domain-quotidiana: #8bb8f5;
  --shadow-rest: 0 6px 18px rgba(0,0,0,0.25);
  --shadow-panel: 0 18px 48px rgba(0,0,0,0.35);
  --shadow-float: 0 24px 60px rgba(0,0,0,0.45);
  --shadow-glint: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-accent: 0 8px 24px rgba(0,0,0,0.4);
  color-scheme: dark;
}
:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --radius-stock: 10px;
  --blur-card: 22px;
  --blur-panel: 24px;
  --blur-menu: 28px;
  --stroke-node: 1.6px;
  --stroke-link: 1.6px;
  --stroke-pipe: 10px;
  --stroke-series: 2.5px;
  --stroke-icon: 1.75px;
  --stroke-domain: 1.8px;
  --size-control: 44px;
  --size-control-lg: 56px;
  --size-topbar: 72px;
  --size-simbar: 68px;
  --size-icon: 20px;
  --size-domain-icon: 48px;
  --font-sans: "Flowmind Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Le preferenze di accessibilità del Mac e del telefono. «Riduci trasparenza»: il vetro diventa pieno.
   «Aumenta contrasto»: i filetti e i bordi prendono il valore forte. Per chi non le attiva non cambia niente.
   Il selettore ripete [data-theme] per valere anche sopra i due temi. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme] {
    --glass-card: var(--surface);
    --glass-panel: var(--surface);
    --glass-menu: var(--surface);
    --blur-card: 0px;
    --blur-panel: 0px;
    --blur-menu: 0px;
  }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  :root, :root[data-theme] {
    --line: var(--line-strong);
    --glass-edge: var(--line-strong);
    --ink-faint: var(--ink-soft);
  }
}