/* Relephant design tokens (30-web-app §1.1). Light on :root, dark on [data-theme="dark"], and the same dark block
   again for [data-theme="auto"] under a dark color scheme (kept byte-identical; web.tokens.test checks it). */
:root {
  color-scheme: light;
  /* neutrals: warm greys */
  --bg: #fbfaf8; --surface: #f3f1ec; --raised: #ffffff;
  --ink: #1b1a18; --mute: #64605a; --faint: #8d877e; /* faint = non-text only (icons >= 16px, disabled) */
  --line: #e4e0d8; --line-strong: #d3cec4;
  /* brand */
  --accent: #0b6a78; --accent-hover: #08545f; --accent-ink: #ffffff; /* Lagoon: interactive only */
  --note: #f2a516; --note-ink: #5c3a00; --note-soft: #fdf1d8; --note-on: #1b1a18; /* Marigold: agent notes only */
  /* status (always with glyph + label) */
  --ok: #18794a; --warn: #9a5b00; --danger: #c0352b; --info: #2a63c4;
  /* charts: categorical slots (fixed order, never cycled) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  /* charts: sequential blue, low to high (heatmaps) */
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5;
  --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;
  --chart-grid: #ece9e3; --chart-axis: #cfcac0; --chart-other: var(--faint);
  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* shape + elevation */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-pop: 0 1px 2px rgba(27,26,24,.06), 0 8px 24px rgba(27,26,24,.10);
  --scrim: rgba(27,26,24,.35);
  /* motion */
  --dur-1: 80ms; --dur-2: 120ms; --dur-3: 150ms; --dur-exit: 100ms;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.4,0,1,1);
  /* layout */
  --sidebar-w: 248px; --rail-w: 56px; --topbar-h: 48px; --header-h: 56px;
  --feed-max: 680px; --dash-max: 1440px; --panel-w: 380px; --sheet-w: 560px;
  --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);
  /* derived */
  --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);
  --warn-soft: color-mix(in srgb, var(--warn) 11%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, 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(--bg) 82%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121110; --surface: #1a1917; --raised: #232120;
  --ink: #f2f0eb; --mute: #a6a097; --faint: #7c776f; --line: #33302c; --line-strong: #45413c;
  --accent: #4ec3d3; --accent-hover: #74d2df; --accent-ink: #0b1a1c;
  --note: #f2b33d; --note-ink: #fbe3b5; --note-soft: #2e2414; --note-on: #1b1a18;
  --ok: #4ec98c; --warn: #f0b44a; --danger: #ff7d72; --info: #7aa7ff;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf; --seq-4: #3987e5;
  --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
  --chart-grid: #2e2b28; --chart-axis: #45413c;
  --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --scrim: rgba(0,0,0,.55);
  --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);
  --warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 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: #121110; --surface: #1a1917; --raised: #232120;
  --ink: #f2f0eb; --mute: #a6a097; --faint: #7c776f; --line: #33302c; --line-strong: #45413c;
  --accent: #4ec3d3; --accent-hover: #74d2df; --accent-ink: #0b1a1c;
  --note: #f2b33d; --note-ink: #fbe3b5; --note-soft: #2e2414; --note-on: #1b1a18;
  --ok: #4ec98c; --warn: #f0b44a; --danger: #ff7d72; --info: #7aa7ff;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --seq-1: #0d366b; --seq-2: #184f95; --seq-3: #256abf; --seq-4: #3987e5;
  --seq-5: #6da7ec; --seq-6: #9ec5f4; --seq-7: #cde2fb;
  --chart-grid: #2e2b28; --chart-axis: #45413c;
  --shadow-pop: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --scrim: rgba(0,0,0,.55);
  --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);
  --warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 13%, transparent);
  --ink-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --ink-softer: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
}