/* テーマの色と寸法。名前は region-tags の CSS が読むもの（--bg --panel --border --text
   --text-dim --accent --warn --ok）に合わせてあるので、隅ラベルもテーマに追従する。
   既定は OS の設定に従う。data-theme="dark" / "light" で固定できる。 */

:root {
  color-scheme: dark;
  --bg: #1b1c1f;
  --panel: #232428;
  --header: #2a2b30;
  --border: #3a3b42;
  --text: #e6e6e8;
  --text-dim: #9a9ba3;
  --accent: #6ec3f4;
  --warn: #e0a050;
  --ok: #58d68d;
  --danger: #f07070;
  --control: #2f3036;
  --control-hover: #383a41;
  --checker-a: #2c2d31;
  --checker-b: #3a3b40;

  --radius: 6px;
  --gap: 8px;
  --font-ui: "Segoe UI", "Yu Gothic UI", "Meiryo UI", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font-size: 13px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f5;
  --panel: #ffffff;
  --header: #e9e9ee;
  --border: #d0d0d8;
  --text: #1f2024;
  --text-dim: #6b6c75;
  --accent: #1a7fc4;
  --warn: #b86b12;
  --ok: #2a9d5c;
  --danger: #c93c3c;
  --control: #eeeef2;
  --control-hover: #e2e2e8;
  --checker-a: #ffffff;
  --checker-b: #dcdce2;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --bg: #f3f3f5;
    --panel: #ffffff;
    --header: #e9e9ee;
    --border: #d0d0d8;
    --text: #1f2024;
    --text-dim: #6b6c75;
    --accent: #1a7fc4;
    --warn: #b86b12;
    --ok: #2a9d5c;
    --danger: #c93c3c;
    --control: #eeeef2;
    --control-hover: #e2e2e8;
    --checker-a: #ffffff;
    --checker-b: #dcdce2;
  }
}