/* Brand swatches and light/dark semantic tokens. */
/* Approved Space AI swatches. All supporting tones derive from these five. */
:root  {
  --navy: #07102d;
  --blue: #2457ff;
  --cyan: #00d9f5;
  --violet: #8a2be2;
  --ice: #f5f8ff;
  --bg: var(--ice);
  --surface: var(--ice);
  --surface-alt: color-mix(in srgb, var(--ice) 94%, var(--blue));
  --text: var(--navy);
  --muted: color-mix(in srgb, var(--navy) 72%, var(--ice));
  --line: color-mix(in srgb, var(--navy) 15%, var(--ice));
  --accent: var(--blue);
  --button: var(--blue);
  --button-text: var(--ice);
  --focus: var(--blue);
  --error: var(--violet);
  --shadow: 0 18px 60px color-mix(in srgb, var(--navy) 3%, transparent);
  --diagram-bg: color-mix(in srgb, var(--surface) 90%, var(--blue));
  --diagram-alt: color-mix(in srgb, var(--surface) 90%, var(--cyan));
  --radius: 16px;
  color-scheme: light;
}

:root[data-theme=dark]  {
  --bg: var(--navy);
  --surface: color-mix(in srgb, var(--navy) 95%, var(--ice));
  --surface-alt: color-mix(in srgb, var(--navy) 90%, var(--ice));
  --text: var(--ice);
  --muted: color-mix(in srgb, var(--ice) 74%, var(--navy));
  --line: color-mix(in srgb, var(--ice) 18%, var(--navy));
  --accent: var(--cyan);
  --button: var(--cyan);
  --button-text: var(--navy);
  --focus: var(--cyan);
  --error: color-mix(in srgb, var(--ice) 75%, var(--violet));
  --shadow: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark)  {
  :root:not([data-theme]), :root[data-theme=auto] {
    --bg: var(--navy);
    --surface: color-mix(in srgb, var(--navy) 95%, var(--ice));
    --surface-alt: color-mix(in srgb, var(--navy) 90%, var(--ice));
    --text: var(--ice);
    --muted: color-mix(in srgb, var(--ice) 74%, var(--navy));
    --line: color-mix(in srgb, var(--ice) 18%, var(--navy));
    --accent: var(--cyan);
    --button: var(--cyan);
    --button-text: var(--navy);
    --focus: var(--cyan);
    --error: color-mix(in srgb, var(--ice) 75%, var(--violet));
    --shadow: none;
    color-scheme: dark;
  }
}