/* flexb0x design tokens (SPEC §13.10). Light by default; dark under data-theme="dark" or "auto" + system dark. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f5f5f7;
  --raised: #ffffff;
  --ink: #111114;
  --mute: #5f5f69;
  --line: #e4e4e9;
  --accent: #2f54eb;
  --accent-ink: #ffffff;
  --danger: #c8372d;
  --ok: #1d8a4e;
  --shadow: 0 8px 30px rgba(0, 0, 0, .12);
  --radius: 12px;
  --radius-lg: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* derived (not in the spec table; built from the tokens above) */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 35%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 9%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 11%, transparent);
  --ink-soft: color-mix(in srgb, var(--ink) 6%, transparent);
  --ink-softer: color-mix(in srgb, var(--ink) 3.5%, transparent);
  --glass: color-mix(in srgb, var(--raised) 82%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d10;
  --surface: #17171c;
  --raised: #1e1e25;
  --ink: #f2f2f5;
  --mute: #9c9ca8;
  --line: #2b2b34;
  --accent: #7b93ff;
  --accent-ink: #0d0d10;
  --danger: #ff7a6e;
  --ok: #4cc38a;
  --shadow: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --ink-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --ink-softer: color-mix(in srgb, var(--ink) 4.5%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0d0d10;
    --surface: #17171c;
    --raised: #1e1e25;
    --ink: #f2f2f5;
    --mute: #9c9ca8;
    --line: #2b2b34;
    --accent: #7b93ff;
    --accent-ink: #0d0d10;
    --danger: #ff7a6e;
    --ok: #4cc38a;
    --shadow: 0 8px 30px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
    --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
    --ink-soft: color-mix(in srgb, var(--ink) 8%, transparent);
    --ink-softer: color-mix(in srgb, var(--ink) 4.5%, transparent);
  }
}