/* BoltGauge design tokens.
 *
 * Held to `src/tokens.ts` by `test/tokens.test.ts` — edit both or neither.
 * The reasoning behind each value lives in tokens.ts; this file is deliberately
 * comment-light so the two stay easy to diff.
 *
 * Theme resolution, in precedence order:
 *   1. html[data-theme="light"|"dark"] — an explicit choice always wins
 *   2. prefers-color-scheme — the operating system, when nothing was chosen
 *   3. :root — light
 *
 * The shipped single-machine dashboard has only rules 1 and 3, because it sets
 * the attribute before first paint. Rule 2 is added here so a page can render
 * correctly before any script runs, which a sign-in screen needs and an
 * always-on instrument did not.
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #f7f8fc;
  --surface: #ffffff;
  --ink: #11131a;
  --ink-2: #272b39;
  --muted: #646b7d;
  --grid: #e9ebf2;
  --axis: #d2d6e0;
  --border: rgba(17,19,26,.10);
  --field-border: #646b7d;
  --good: #006300;
  --warn: #b87400;
  --danger: #d03b3b;
  --edge-shadow: rgba(9, 10, 15, .18);

  --s1: #586fff;
  --s2: #008279;
  --s3: #109a00;
  --s4: #4e0391;
  --s5: #8b1ed3;
  --s6: #d844c4;
  --s7: #7b2a4f;
  --s8: #00548e;

  /* selection is ink-on-page, so no series colour doubles as UI chrome */
  --accent: var(--ink);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --fs-meta: 12px;
  --fs-body: 14px;
  --fs-field: 16px;
  --fs-lead: 20px;
  --fs-title: 28px;
  --fs-display: 40px;

  --r-control: 6px;
  --r-panel: 10px;
  --r-pill: 999px;

  /* Focus ring. The colour tracks the identity core in whichever theme is
   * resolved, so it is not repeated in the themed blocks below. The offset is
   * load-bearing — see the note in tokens.ts. */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--identity-core);

  /* Both reference the themed --edge-shadow, so they lift correctly in dark. */
  --elev-resting: 0 1px 2px var(--edge-shadow);
  --elev-overlay: 0 8px 24px var(--edge-shadow);

  --display-font: "Space Grotesk", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Identity colours. Fixed by the identity package; not UI knobs. */
  --identity-background: #F7F8FC;
  --identity-structure: #11131A;
  --identity-core: #5B6EFF;
  --identity-needle: #9A55EA;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #090a0f;
    --surface: #11131a;
    --ink: #f7f8fc;
    --ink-2: #d2d6e0;
    --muted: #b5bac8;
    --grid: #1a1d28;
    --axis: #272b39;
    --border: rgba(247,248,252,.10);
    --field-border: #8c93a5;
    --good: #0ca30c;
    --warn: #fab219;
    --danger: #dc4b4b;
    --edge-shadow: rgba(0, 0, 0, .6);

    --s1: #8faaff;
    --s2: #5bf8f3;
    --s3: #99e747;
    --s4: #4d51d5;
    --s5: #b36afe;
    --s6: #e689c8;
    --s7: #b51e80;
    --s8: #0587ba;

    --identity-background: #090A0F;
    --identity-structure: #F7F8FC;
    --identity-core: #7F8EFF;
    --identity-needle: #B878F4;
  }
}

html[data-theme="dark"] {
  --page: #090a0f;
  --surface: #11131a;
  --ink: #f7f8fc;
  --ink-2: #d2d6e0;
  --muted: #b5bac8;
  --grid: #1a1d28;
  --axis: #272b39;
  --border: rgba(247,248,252,.10);
  --field-border: #8c93a5;
  --good: #0ca30c;
  --warn: #fab219;
  --danger: #dc4b4b;
  --edge-shadow: rgba(0, 0, 0, .6);

  --s1: #8faaff;
  --s2: #5bf8f3;
  --s3: #99e747;
  --s4: #4d51d5;
  --s5: #b36afe;
  --s6: #e689c8;
  --s7: #b51e80;
  --s8: #0587ba;

  --identity-background: #090A0F;
  --identity-structure: #F7F8FC;
  --identity-core: #7F8EFF;
  --identity-needle: #B878F4;
}

/* An explicit light choice has to survive a dark operating system. */
html[data-theme="light"] {
  --page: #f7f8fc;
  --surface: #ffffff;
  --ink: #11131a;
  --ink-2: #272b39;
  --muted: #646b7d;
  --grid: #e9ebf2;
  --axis: #d2d6e0;
  --border: rgba(17,19,26,.10);
  --field-border: #646b7d;
  --good: #006300;
  --warn: #b87400;
  --danger: #d03b3b;
  --edge-shadow: rgba(9, 10, 15, .18);

  --s1: #586fff;
  --s2: #008279;
  --s3: #109a00;
  --s4: #4e0391;
  --s5: #8b1ed3;
  --s6: #d844c4;
  --s7: #7b2a4f;
  --s8: #00548e;

  --identity-background: #F7F8FC;
  --identity-structure: #11131A;
  --identity-core: #5B6EFF;
  --identity-needle: #9A55EA;
}

/* Motion contract: reduce-motion kills all of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}