/* Design tokens. Colour, radius, elevation and motion values are adapted from
   DeepSeek Harness (MIT, © 2026 DeepSeek,
   https://github.com/deepseek-ai/deepseek-harness). Themes are one attribute:
   none means the system preference, `data-theme="light|dark"` an explicit
   choice; every colour is written once with light-dark(). */
:root {
  color-scheme: light dark;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-panel: 28px; --radius-pill: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: .1s; --dur: .2s; --dur-slow: .3s;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-code: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo,
    Courier, "PingFang SC", "Microsoft YaHei", monospace;
  --content-size: 14px;
  --content-delta: calc(var(--content-size) - 14px);
  --content-secondary: min(calc(var(--content-size) - 1px), max(13px, calc(var(--content-size) - 2px)));

  --bg:          light-dark(rgb(255 255 255), rgb(21 21 23));
  --layer-1:     light-dark(rgb(255 255 255), rgb(35 35 36));
  --layer-2:     light-dark(rgb(255 255 255), rgb(44 44 46));
  --layer-3:     light-dark(rgb(255 255 255), rgb(53 54 56));
  --module:      light-dark(rgb(245 246 247), rgb(53 54 56));
  --sidebar:     light-dark(rgb(249 250 251), rgb(27 27 28));
  --skeleton:    light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .08));
  --scrim:       light-dark(rgb(0 0 0 / .24), rgb(0 0 0 / .5));
  --line-1:      light-dark(rgb(0 0 0 / .04), rgb(255 255 255 / .06));
  --line-2:      light-dark(rgb(0 0 0 / .10), rgb(255 255 255 / .12));
  --line-3:      light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .16));
  --line-4:      light-dark(rgb(0 0 0 / .16), rgb(255 255 255 / .20));
  --ink:         light-dark(rgb(15 17 21), rgb(249 250 251));
  --ink-2:       light-dark(rgb(97 102 107), rgb(207 211 214));
  --ink-3:       light-dark(rgb(129 133 140), rgb(173 178 184));
  --ink-4:       light-dark(rgb(173 178 184), rgb(129 133 140));
  --ink-on-ink:  light-dark(rgb(255 255 255), rgb(15 17 21));
  --ink-hover:   light-dark(rgb(67 69 74), rgb(235 238 242));
  --accent:      light-dark(rgb(65 118 230), rgb(122 170 255));
  --accent-hover: light-dark(rgb(122 170 255), rgb(65 118 230));
  --ink-on-accent: rgb(255 255 255);
  --accent-soft: light-dark(rgb(228 237 253), rgb(52 65 91));
  --hover:       light-dark(rgb(38 49 72 / .06), rgb(255 255 255 / .08));
  --hover-strong: light-dark(rgb(38 49 72 / .14), rgb(255 255 255 / .24));
  --pressed:     light-dark(rgb(38 49 72 / .10), rgb(255 255 255 / .14));
  --hover-danger: light-dark(rgb(236 19 19 / .05), rgb(242 90 90 / .15));
  --nav-hover:   light-dark(rgb(241 243 245), rgb(44 44 46));
  --nav-active:  light-dark(rgb(235 238 242), rgb(67 69 74));
  --elevated:    light-dark(rgb(255 255 255), rgb(67 69 74));
  --selector:    light-dark(rgb(245 246 247), rgb(53 54 56));
  --bubble:      light-dark(rgb(237 243 254), rgb(44 44 46));
  --input-major: light-dark(rgb(255 255 255), rgb(44 44 46));
  --code-block:  light-dark(rgb(249 250 251), rgb(27 27 28));
  --code-inline: light-dark(rgb(250 250 250), rgb(41 41 41));
  --chip-active: light-dark(rgb(241 243 245), rgb(44 44 46));
  --ok:          rgb(34 197 94);
  --ok-soft:     light-dark(rgb(230 250 237), rgb(35 60 44));
  --warn:        rgb(245 158 11);
  --warn-ink:    rgb(221 134 41);
  --warn-soft:   light-dark(rgb(254 245 231), rgb(39 36 31));
  --bad:         light-dark(rgb(236 19 19), rgb(242 90 90));
  --bad-soft:    light-dark(rgb(253 232 232), rgb(60 31 27));
  --idle:        light-dark(rgb(212 212 212), rgb(84 85 87));
  --toast-bg:    light-dark(rgb(53 54 56), rgb(67 69 74));
  --toast-ink:   rgb(255 255 255);
  --toast-action: rgb(122 170 255);
  --tooltip-bg:  light-dark(rgb(44 44 46), rgb(67 69 74));
  --menu-fill:   light-dark(rgb(248 249 250 / .58), rgb(67 69 74 / .45));
  --menu-fill-solid: light-dark(rgb(248 249 250 / .94), rgb(48 49 54 / .94));
  --menu-blur:   blur(40px) saturate(150%);
  --switch-thumb: light-dark(rgb(255 255 255), rgb(173 178 184));
  --scroll-thumb: light-dark(rgb(229 229 229), rgb(60 60 61));
  --scroll-thumb-hover: light-dark(rgb(212 212 212), rgb(84 85 87));
  --working:     light-dark(color-mix(in srgb, rgb(65 118 230) 70%, rgb(23 37 84)),
                            color-mix(in srgb, rgb(86 134 254) 55%, rgb(173 178 184)));
  --stroke: var(--line-4);
  --shadow-1: 0 2px 4px rgb(0 0 0 / .05);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .02), 0 2px 8px rgb(0 0 0 / .04);
  --shadow-3: 0 0 1px rgb(0 0 0 / .2), 0 0 4px rgb(0 0 0 / .02), 0 12px 32px rgb(0 0 0 / .08);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Elevation: the 0.5px hairline is the first shadow layer. Declared on every
   element so a surface that rebinds --stroke (a menu) changes the stroke of
   its own elevation; an inherited value would already be resolved. */
* {
  --elev-stroke: 0 0 0 .5px var(--stroke);
  --elev-panel: var(--elev-stroke), 0 3px 8px rgb(0 0 0 / .03), 0 0 16px rgb(0 0 0 / .02);
  --elev-prominent: var(--elev-stroke), 0 3px 8px rgb(0 0 0 / .04), 0 0 20px rgb(0 0 0 / .05);
  --elev-soft: var(--elev-stroke), 0 4px 16px rgb(0 0 0 / .03), 0 0 24px rgb(0 0 0 / .03);
}