/* Shared semantic colour tokens. The early theme script sets data-theme before paint. */
:root {
  color-scheme: dark;
  --bg: #070a0d;
  --surface: #0c1116;
  --surface2: #111820;
  --line: #26313a;
  --ink: #eff6f5;
  --muted: #8b9aa6;
  --teal: #42dbc5;
  --teal2: #1ba78f;
  --blue: #82aaff;
  --warn: #f0ad68;
  --bad: #f07c7c;
  --ok: #61d889;
  --focus: #8cdcff;
  --accent: var(--teal);
  --accent-contrast: #03241f;
  --text-subtle: #a9b6bf;
  --shadow: #000000;
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f7faf9;
  --surface: #ffffff;
  --surface2: #edf4f2;
  --line: #c9d7d4;
  --ink: #10201e;
  --muted: #526663;
  --teal: #087d6d;
  --teal2: #056759;
  --blue: #315da8;
  --warn: #a45409;
  --bad: #bd3434;
  --ok: #197447;
  --focus: #1268bd;
  --accent: var(--teal);
  --accent-contrast: #ffffff;
  --text-subtle: #425b57;
  --shadow: #17332d;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #f7faf9;
    --surface: #ffffff;
    --surface2: #edf4f2;
    --line: #c9d7d4;
    --ink: #10201e;
    --muted: #526663;
    --teal: #087d6d;
    --teal2: #056759;
    --blue: #315da8;
    --warn: #a45409;
    --bad: #bd3434;
    --ok: #197447;
    --focus: #1268bd;
    --accent: var(--teal);
    --accent-contrast: #ffffff;
    --text-subtle: #425b57;
    --shadow: #17332d;
  }
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[data-theme-toggle] {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  flex: none;
}

[data-theme-toggle] svg { display: block; }