/* Design tokens. tests/test_contrast.py parses this file: keep the six blocks below, hex colours only.
   Dark is written twice (the OS preference and a forced data-theme), child dark likewise. */

:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #eef0f6;
  --text: #1b1d29;
  --text-muted: #545a6e;
  --border: #d5d9e4;
  --border-strong: #767d92;
  --accent: #4338ca;
  --on-accent: #ffffff;
  --link: #3730a3;
  --danger: #b42318;
  --banner-bg: #fff4d6;
  --banner-text: #5c3d00;
  --help-bg: #e8f3ff;
  --help-text: #0b3a6b;
  --focus: #4338ca;
  --sidebar: #f0f1f7;
  --user-bubble: #e8eaf3;
  --accent-soft: #e4e7fb;
  --shadow-1: 0 1px 2px rgb(27 29 41 / 12%), 0 2px 8px rgb(27 29 41 / 8%);
  --shadow-2: 0 4px 16px rgb(27 29 41 / 14%), 0 1px 3px rgb(27 29 41 / 10%);
  --backdrop: #1b1d2966;
  --chart-1: #4338ca;
  --chart-2: #0f766e;
  --chart-3: #b45309;
  --chart-4: #be185d;
  --chart-5: #475569;
  --chart-grid: #e3e6ee;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fs-base: 1.125rem;
  --step--1: 0.875em;
  --step-1: 1.25em;
  --step-2: 1.5em;
  --step-3: 2em;
  --tap: 44px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-bubble: 20px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --col: 46rem;
  --rail: 17rem;
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-slide: 260ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1117;
    --surface: #171a23;
    --surface-2: #222634;
    --text: #eceef4;
    --text-muted: #a9afc2;
    --border: #2e3344;
    --border-strong: #7c8499;
    --accent: #a5b4fc;
    --on-accent: #0f1117;
    --link: #c7d2fe;
    --danger: #ff8a80;
    --banner-bg: #3a2e10;
    --banner-text: #ffe2a3;
    --help-bg: #10243a;
    --help-text: #cfe6ff;
    --focus: #a5b4fc;
    --sidebar: #13161e;
    --user-bubble: #242836;
    --accent-soft: #262b45;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 50%), 0 1px 3px rgb(0 0 0 / 40%);
    --backdrop: #00000099;
    --chart-1: #a5b4fc;
    --chart-2: #5eead4;
    --chart-3: #fbbf24;
    --chart-4: #f9a8d4;
    --chart-5: #cbd5e1;
    --chart-grid: #2a2f3d;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #171a23;
  --surface-2: #222634;
  --text: #eceef4;
  --text-muted: #a9afc2;
  --border: #2e3344;
  --border-strong: #7c8499;
  --accent: #a5b4fc;
  --on-accent: #0f1117;
  --link: #c7d2fe;
  --danger: #ff8a80;
  --banner-bg: #3a2e10;
  --banner-text: #ffe2a3;
  --help-bg: #10243a;
  --help-text: #cfe6ff;
  --focus: #a5b4fc;
  --sidebar: #13161e;
  --user-bubble: #242836;
  --accent-soft: #262b45;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
  --shadow-2: 0 4px 16px rgb(0 0 0 / 50%), 0 1px 3px rgb(0 0 0 / 40%);
  --backdrop: #00000099;
  --chart-1: #a5b4fc;
  --chart-2: #5eead4;
  --chart-3: #fbbf24;
  --chart-4: #f9a8d4;
  --chart-5: #cbd5e1;
  --chart-grid: #2a2f3d;
}

.mode-child {
  --bg: #fff8ee;
  --surface: #ffffff;
  --surface-2: #fdeedd;
  --sidebar: #fdf0e1;
  --user-bubble: #dff3ef;
  --accent-soft: #d3efe9;
  --warm: #f59e0b;
  --accent: #0f766e;
  --on-accent: #ffffff;
  --font: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --radius-lg: 24px;
  --radius-bubble: 28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode-child {
    --bg: #11151a;
    --surface: #182027;
    --surface-2: #202a30;
    --sidebar: #141b20;
    --user-bubble: #182926;
    --accent-soft: #1c3a36;
    --warm: #fbbf24;
    --accent: #5eead4;
    --on-accent: #0f1117;
  }
}

:root[data-theme="dark"] .mode-child {
  --bg: #11151a;
  --surface: #182027;
  --surface-2: #202a30;
  --sidebar: #141b20;
  --user-bubble: #182926;
  --accent-soft: #1c3a36;
  --warm: #fbbf24;
  --accent: #5eead4;
  --on-accent: #0f1117;
}