/* design-tokens.css — the single source of the design tokens.
 *
 * Every surface imports this file and none re-declares its `:root` block. It
 * is deliberately CSS, not TS — it carries only `var(--…)` definitions, no logic.
 *
 * This file is the single source of these values: the landing, the Mini App
 * and the operator panel all consume it, and the drift tests pin what it
 * declares.
 *
 * The success/done status role is served by the existing `--read`/`--read-bg`
 * pair; it carries no token of its own.
 *
 * The `--sans`/`--mono` stacks name IBM Plex, whose four faces are declared
 * here; each `url()` resolves from this file into `./fonts/`, the single
 * committed copy of the woff2 files.
 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --canvas: #f4f1ec;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --surface-3: #efeae1;
  --ink: #1c1a16;
  --ink-2: #57524a;
  --ink-3: #7a7468;
  --border: #e2ddd3;
  --border-2: #d2ccbf;
  --accent: #0e6e62;
  --accent-2: #0b584e;
  --accent-text: #0e6e62;
  --accent-tint: #e2efec;
  --accent-ink: #ffffff;
  --read: #1f7a4d;
  --read-bg: #e8f1ea;
  --write: #9a5b12;
  --write-bg: #f6ecdc;
  --danger: #a8322a;
  --danger-bg: #a8322a;
  --danger-tint: #f3e2e1;
  --code-kw: #0e6e62;
  --code-str: #9a5b12;
  --tg-bg: #dfe7df;
  --tg-in: #ffffff;
  --tg-out: #e3f6d3;
  --tg-meta: #7c8a7e;
  --sans: "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --control-h: 44px;
  --radius-control: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #16140f;
    --surface: #221f18;
    --surface-2: #1c1a14;
    --surface-3: #2a261d;
    --ink: #f1ede4;
    --ink-2: #c7c1b4;
    --ink-3: #a39c8d;
    --border: #332f25;
    --border-2: #3d3830;
    --accent: #138273;
    --accent-2: #0f6c60;
    --accent-text: #6cc4b6;
    --accent-tint: #1d3330;
    --accent-ink: #ffffff;
    --read: #6cc08f;
    --read-bg: #1c2b21;
    --write: #d49a52;
    --write-bg: #33271a;
    --danger: #ee8a7e;
    --danger-bg: #b4453b;
    --danger-tint: #36241d;
    --code-kw: #6cc4b6;
    --code-str: #d49a52;
    --tg-bg: #131a16;
    --tg-in: #212b25;
    --tg-out: #23402f;
    --tg-meta: #8a9a8e;
  }
}

/* The one control size: 44px on a phone, 36px from tablet up. */
@media (min-width: 768px) {
  :root {
    --control-h: 36px;
  }
}