/* The only place colours are defined (UI-6). Every other stylesheet uses these variables. */
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.14425ba9c6.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700.d0d4e81880.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --bg: #ffffff;
  --ink: #1f1e24;
  --muted: #6b6975;
  --line: #e7e5e1;
  --track: #f5f4f2;

  --ok-fill: #cfe9d9;      --ok-ink: #2f6b4a;
  --warn-fill: #f8e8c4;    --warn-ink: #7a5a14;
  --fail-fill: #f6cfcf;    --fail-ink: #8a3030;
  --late-fill: #f9dcc2;    --late-ink: #8a5420;
  --neutral-fill: #f0efec; --neutral-ink: #4a4955;
  --info-fill: #e3e8f7;    --info-ink: #3a4f86;

  --blue-line: #6f88c9;   --blue-fill: #d3def6;   --blue-ink: #3a4f86;
  --violet-line: #8d78c9; --violet-fill: #dcd2f3; --violet-ink: #5a4a8f;
  --green-line: #5e9b7a;  --green-fill: #cfe9d9;  --green-ink: #2f6b4a;
  --peach-line: #c98a55;  --peach-fill: #f9dcc2;  --peach-ink: #8a5420;

  --stripe-warn: #d6ab4a;
  --stripe-fail: #cf7777;
  --stripe-idle: #c4c2bc;

  --backdrop: rgb(0 0 0 / 35%);

  --r-card: 10px;
  --r-control: 8px;
  --r-chip: 5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #17161b;
    --ink: #e9e7ee;
    --muted: #9a98a6;
    --line: #2c2a33;
    --track: #211f26;

    --ok-fill: #1f3a2c;      --ok-ink: #9fd4b5;
    --warn-fill: #3d3318;    --warn-ink: #e6c779;
    --fail-fill: #442222;    --fail-ink: #efa3a3;
    --late-fill: #44301c;    --late-ink: #eab98a;
    --neutral-fill: #2a2930; --neutral-ink: #bcbac6;
    --info-fill: #222a44;    --info-ink: #a9bbf0;

    --blue-line: #7f96d6;   --blue-fill: #232b45;   --blue-ink: #a9bbf0;
    --violet-line: #9a86d4; --violet-fill: #2d2745; --violet-ink: #c4b6ee;
    --green-line: #6aae8a;  --green-fill: #1f3a2c;  --green-ink: #9fd4b5;
    --peach-line: #d49a63;  --peach-fill: #44301c;  --peach-ink: #eab98a;

    --stripe-warn: #c9a040;
    --stripe-fail: #cf7a7a;
    --stripe-idle: #55535f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17161b;
  --ink: #e9e7ee;
  --muted: #9a98a6;
  --line: #2c2a33;
  --track: #211f26;

  --ok-fill: #1f3a2c;      --ok-ink: #9fd4b5;
  --warn-fill: #3d3318;    --warn-ink: #e6c779;
  --fail-fill: #442222;    --fail-ink: #efa3a3;
  --late-fill: #44301c;    --late-ink: #eab98a;
  --neutral-fill: #2a2930; --neutral-ink: #bcbac6;
  --info-fill: #222a44;    --info-ink: #a9bbf0;

  --blue-line: #7f96d6;   --blue-fill: #232b45;   --blue-ink: #a9bbf0;
  --violet-line: #9a86d4; --violet-fill: #2d2745; --violet-ink: #c4b6ee;
  --green-line: #6aae8a;  --green-fill: #1f3a2c;  --green-ink: #9fd4b5;
  --peach-line: #d49a63;  --peach-fill: #44301c;  --peach-ink: #eab98a;

  --stripe-warn: #c9a040;
  --stripe-fail: #cf7a7a;
  --stripe-idle: #55535f;
}

/* Tone classes (UI-3): every status chip, callout, and card stripe uses one of these. */
.t-ok      { --cbg: var(--ok-fill);      --cink: var(--ok-ink);      --stripe: var(--ok-ink); }
.t-warn    { --cbg: var(--warn-fill);    --cink: var(--warn-ink);    --stripe: var(--stripe-warn); }
.t-fail    { --cbg: var(--fail-fill);    --cink: var(--fail-ink);    --stripe: var(--stripe-fail); }
.t-late    { --cbg: var(--late-fill);    --cink: var(--late-ink);    --stripe: var(--peach-line); }
.t-neutral { --cbg: var(--neutral-fill); --cink: var(--neutral-ink); --stripe: var(--stripe-idle); }
.t-info    { --cbg: var(--info-fill);    --cink: var(--info-ink);    --stripe: var(--blue-line); }

/* Accent hues for icon tiles (UI-9). They never carry state. */
.a-blue   { --abg: var(--blue-fill);   --aink: var(--blue-ink); }
.a-violet { --abg: var(--violet-fill); --aink: var(--violet-ink); }
.a-green  { --abg: var(--green-fill);  --aink: var(--green-ink); }
.a-peach  { --abg: var(--peach-fill);  --aink: var(--peach-ink); }