/* Design tokens (see docs/STYLING.md). The only file that may contain raw colors. Light by default, dark follows the system. */
:root, :root[data-theme="light"] {
  --bg: #FAFAF9;
  --canvas-bg: #FAFAF9;
  --canvas-dot: rgba(0, 0, 0, 0.12);
  --surface: #FFFFFF;
  --surface-2: #F4F4F5;
  --border: rgba(24, 24, 27, 0.08);
  --border-strong: rgba(24, 24, 27, 0.16);
  --text: #18181B;
  --text-muted: #71717A;
  --text-faint: #A1A1AA;
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-soft: #EEF2FF;
  --on-accent: #FFFFFF;
  --danger: #EF4444;
  --group-bg: rgba(99, 102, 241, 0.05);
  --drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18));
  --scrim: rgba(24, 24, 27, 0.4);
  --rainbow: conic-gradient(hsl(0 85% 58%), hsl(60 90% 52%), hsl(120 60% 45%), hsl(180 70% 45%), hsl(240 75% 60%), hsl(300 70% 55%), hsl(360 85% 58%)); /* custom color swatch */

  /* Brand accents: skins give them real colors; the default skin maps them to the indigo set */
  --brand-yellow: var(--accent);
  --brand-teal: var(--accent);
  --brand-teal-ink: var(--accent);
  --brand-red: var(--danger);
  /* Per-spot tokens (a skin can restyle these without touching the component CSS) */
  --tool-step: currentColor;
  --tool-decision: currentColor;
  --tool-start: currentColor;
  --tool-end: currentColor;
  --logo-glyph: var(--on-accent);
  --empty-icon-bg: var(--accent-soft);
  --empty-icon-fg: var(--accent);
  --group-stroke: var(--border-strong);
  --landing-dot: var(--text-faint);
  --edge-label-border: var(--border-strong);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(0, 0, 0, 0.14);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0E;
    --canvas-bg: #0B0B0E;
    --canvas-dot: rgba(255, 255, 255, 0.07);
    --surface: #17171B;
    --surface-2: #232329;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #F4F4F5;
    --text-muted: #A1A1AA;
    --text-faint: #71717A;
    --accent: #818CF8;
    --accent-hover: #A5B4FC;
    --accent-soft: rgba(129, 140, 248, 0.14);
    --on-accent: #0B0B0E;
    --group-bg: rgba(129, 140, 248, 0.07);
    --drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
/* Forced themes: JS sets data-theme="light" while exporting so images are always light */
:root[data-theme="dark"] {
  --bg: #0B0B0E;
  --canvas-bg: #0B0B0E;
  --canvas-dot: rgba(255, 255, 255, 0.07);
  --surface: #17171B;
  --surface-2: #232329;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #F4F4F5;
  --text-muted: #A1A1AA;
  --text-faint: #71717A;
  --accent: #818CF8;
  --accent-hover: #A5B4FC;
  --accent-soft: rgba(129, 140, 248, 0.14);
  --on-accent: #0B0B0E;
  --group-bg: rgba(129, 140, 248, 0.07);
  --drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---- Skins: <html data-skin="..."> overrides tokens only. Add a skin = add one block set like this. ---- */
/* Wertumnus (WERTUM brand). Light; also the forced-light combination used by image export. */
:root[data-skin="wertumnus"], :root[data-skin="wertumnus"][data-theme="light"] {
  --bg: #F7F7FB;
  --canvas-bg: #F7F7FB;
  --canvas-dot: rgba(26, 22, 48, 0.16);
  --surface: #FFFFFF;
  --surface-2: #F3F2FA;
  --border: #E3E1F2;
  --border-strong: #CFCCE6;
  --text: #1A1630;
  --text-muted: #5C5878;
  --text-faint: #9A97B3;
  --accent: #322883;
  --accent-hover: #241D5E;
  --accent-soft: #ECEAF8;
  --on-accent: #FFFFFF;
  --danger: #FF0C43;
  --group-bg: color-mix(in srgb, var(--brand-teal) 6%, transparent);
  --drop-sm: drop-shadow(0 1px 1.5px rgba(26, 22, 48, 0.22));
  --scrim: rgba(26, 22, 48, 0.45);
  --shadow-sm: 0 1px 2px rgba(26, 22, 48, 0.06);
  --shadow-float: 0 1px 2px rgba(26, 22, 48, 0.05), 0 8px 24px -8px rgba(26, 22, 48, 0.18);

  --brand-yellow: #F7BC00;
  --brand-teal: #00FBD8;
  --brand-teal-ink: #00A896;
  --brand-red: #FF0C43;
  --tool-step: var(--accent);
  --tool-decision: var(--brand-yellow);
  --tool-start: var(--brand-teal-ink);
  --tool-end: var(--brand-red);
  --logo-glyph: var(--brand-yellow);
  --empty-icon-bg: color-mix(in srgb, var(--brand-yellow) 22%, var(--surface));
  --empty-icon-fg: var(--accent-hover);
  --group-stroke: #8C89B0;
  --landing-dot: var(--accent);
  --edge-label-border: var(--border);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="wertumnus"]:not([data-theme="light"]) {
    --bg: #14103A;
    --canvas-bg: #14103A;
    --canvas-dot: rgba(243, 242, 250, 0.10);
    --surface: #1D1850;
    --surface-2: #272264;
    --border: rgba(243, 242, 250, 0.10);
    --border-strong: rgba(243, 242, 250, 0.20);
    --text: #F3F2FA;
    --text-muted: #B4B1D0;
    --text-faint: #7F7BA6;
    --accent: #00FBD8;
    --accent-hover: #5CFFE6;
    --accent-soft: rgba(0, 251, 216, 0.12);
    --on-accent: #14103A;
    --danger: #FF4D73;
    --group-bg: color-mix(in srgb, var(--brand-teal) 7%, transparent);
    --drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
    --scrim: rgba(10, 8, 30, 0.65);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --tool-step: #9A92F0;
    --tool-start: var(--brand-teal);
    --tool-end: #FF4D73;
    --logo-glyph: var(--brand-yellow);
    --empty-icon-bg: color-mix(in srgb, var(--brand-yellow) 18%, var(--surface));
    --empty-icon-fg: var(--brand-yellow);
    --group-stroke: #6D699A;
    color-scheme: dark;
  }
}
:root[data-skin="wertumnus"][data-theme="dark"] {
  --bg: #14103A;
  --canvas-bg: #14103A;
  --canvas-dot: rgba(243, 242, 250, 0.10);
  --surface: #1D1850;
  --surface-2: #272264;
  --border: rgba(243, 242, 250, 0.10);
  --border-strong: rgba(243, 242, 250, 0.20);
  --text: #F3F2FA;
  --text-muted: #B4B1D0;
  --text-faint: #7F7BA6;
  --accent: #00FBD8;
  --accent-hover: #5CFFE6;
  --accent-soft: rgba(0, 251, 216, 0.12);
  --on-accent: #14103A;
  --danger: #FF4D73;
  --group-bg: color-mix(in srgb, var(--brand-teal) 7%, transparent);
  --drop-sm: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
  --scrim: rgba(10, 8, 30, 0.65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --tool-step: #9A92F0;
  --tool-start: var(--brand-teal);
  --tool-end: #FF4D73;
  --logo-glyph: var(--brand-yellow);
  --empty-icon-bg: color-mix(in srgb, var(--brand-yellow) 18%, var(--surface));
  --empty-icon-fg: var(--brand-yellow);
  --group-stroke: #6D699A;
  color-scheme: dark;
}

body {
  background: var(--canvas-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}