/* Design tokens. Warm paper in light, soft charcoal (never pure black) in dark.
   Dark applies when the system asks for it and the person has not forced light, or when forced via data-theme. */
:root {
  color-scheme: light;
  --bg: #f7f4ee;
  --surface: #fffdf9;
  --surface-2: #f1ede4;
  --line: #ddd6c8;
  --line-2: #c9c0ae;
  --text: #1f2430;
  --text-2: #5a6070;
  --primary: #2f4f85;
  --primary-ink: #ffffff;
  --primary-soft: #e3eaf6;
  --ok: #1f7a4d;
  --ok-soft: #dff1e6;
  --warn: #9a6200;
  --warn-soft: #fbefd3;
  --err: #b42318;
  --err-soft: #fbe4e1;
  --on-ok: #ffffff;
  --on-warn: #ffffff;
  --on-err: #ffffff;
  --hl-ink: #1f2430;

  --wave-bg: #f3efe6;
  --hidden-bg: #e6e1d5;
  --hidden-fg: #8a8372;
  --speaker-host: #4338ca;
  --speaker-caller: #0f766e;
  --mark-on: #dc2626;
  --mark-stop: #1d4ed8;
  --mark-eot: #ea580c;
  --mark-check: #15803d;
  --mark-q: #7c3aed;
  --cursor: #1f2430;
  --hl: #f5d547;

  --radius: 12px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(31, 36, 48, .08), 0 4px 14px rgba(31, 36, 48, .08);
  --shadow-up: 0 -2px 12px rgba(31, 36, 48, .1);
  --fs: 16px;
  --lh: 1.7;
  --tap: 48px;
  --opt-h: 48px;           /* answer rows and chips: never lower than this */
  --submit-h: 0px;         /* height of the sticky submit bar, written by views/work_shell.js */
  --gap: 12px;
  --topbar-h: 56px;
  --sticky-top: 0px;
  --ease: 120ms ease-out;
  --font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Microsoft YaHei UI", monospace;
}

@media (pointer: coarse) {
  :root { --tap: 56px; --opt-h: 56px; }
}
@media (max-width: 900px) {
  :root { --opt-h: 56px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1f26;
    --surface: #252932;
    --surface-2: #2d323d;
    --line: #3a404d;
    --line-2: #4a5160;
    --text: #e8eaf0;
    --text-2: #a4abbb;
    --primary: #8fb0ee;
    --primary-ink: #14213a;
    --primary-soft: #2a3750;
    --ok: #5fcf93;
    --ok-soft: #1f3a2c;
    --warn: #e6b457;
    --warn-soft: #3d3220;
    --err: #ff8b80;
    --err-soft: #432522;
    --on-ok: #0d2a1a;
    --on-warn: #2a1d00;
    --on-err: #3a0a06;
    --hl-ink: #1f2430;

    --wave-bg: #20242c;
    --hidden-bg: #2c303a;
    --hidden-fg: #7c8496;
    --speaker-host: #8c85f2;
    --speaker-caller: #3fbfb2;
    --mark-on: #ff6b6b;
    --mark-stop: #6ea0ff;
    --mark-eot: #ff9a52;
    --mark-check: #4ade80;
    --mark-q: #b794f6;
    --cursor: #e8eaf0;
    --hl: #d9b72c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-up: 0 -2px 12px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1f26;
  --surface: #252932;
  --surface-2: #2d323d;
  --line: #3a404d;
  --line-2: #4a5160;
  --text: #e8eaf0;
  --text-2: #a4abbb;
  --primary: #8fb0ee;
  --primary-ink: #14213a;
  --primary-soft: #2a3750;
  --ok: #5fcf93;
  --ok-soft: #1f3a2c;
  --warn: #e6b457;
  --warn-soft: #3d3220;
  --err: #ff8b80;
  --err-soft: #432522;
  --on-ok: #0d2a1a;
  --on-warn: #2a1d00;
  --on-err: #3a0a06;
  --hl-ink: #1f2430;

  --wave-bg: #20242c;
  --hidden-bg: #2c303a;
  --hidden-fg: #7c8496;
  --speaker-host: #8c85f2;
  --speaker-caller: #3fbfb2;
  --mark-on: #ff6b6b;
  --mark-stop: #6ea0ff;
  --mark-eot: #ff9a52;
  --mark-check: #4ade80;
  --mark-q: #b794f6;
  --cursor: #e8eaf0;
  --hl: #d9b72c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-up: 0 -2px 12px rgba(0, 0, 0, .4);
}