/* PatchPilot design tokens — the one token file the website and the dashboard
 * both read (docs/DESIGN.md §"Tokens"). A value that is not in DESIGN.md does
 * not belong here, and a value here that is not in DESIGN.md is a defect.
 *
 * Direction: a maintenance log. Light, dense, plain — rows of state that are
 * read rather than watched. The product is a table, so the page is built out
 * of the same material as the table instead of out of illustration.
 *
 * TWO RULES HOLD THROUGHOUT (docs/DESIGN.md §"Principles").
 *
 * 1. `--action` (#1B54C8) belongs to the call to action, and to nothing else
 *    with weight: on the website the controls that collect an email address,
 *    in the dashboard one filled control per screen. The step numbers use it
 *    as 12px text, which carries none next to a filled button — that is the
 *    test.
 *
 * 2. `--ok`, `--warn` and `--alert` are status, never decoration. They appear
 *    on a dot, a chip, a number or a row that carries that status, and
 *    nowhere else. A tile tinted amber because amber looks nice is a status
 *    claim about a tile.
 *
 * The third rule is about the neighbours: glideflow.eu is also a light page
 * with a blue action, so sameness is one careless declaration away. The greys
 * here are neutral where Glideflow's are blue-tinted (#eef0f8, #1a1f36), the
 * action is deeper and quieter than its #3355ff, and this page is a table
 * where that one is a deck of cards. Density is the identity — do not soften
 * it back into cards.
 */

/* ---------- tokens ---------- */
/* Every value below is in docs/DESIGN.md §"Tokens", and
 * test/patchpilot_web/design_tokens_test.exs fails when the two disagree, or
 * when a stylesheet other than this one writes a colour of its own. */

:root {
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #efeff1;
  --border: #dfdfe3;
  --border-soft: #e9e9ec;
  --border-field: #8e8e92;  /* the edge of a control you type into */

  --text: #2a2a2e;
  --text-strong: #121215;
  --muted: #6c6c74;
  --muted-2: #90909a;       /* never text: underlines, rules, the disabled */

  --action: #1b54c8;        /* the call to action, and nothing else */
  --action-ink: #ffffff;
  --ok: #17794c;            /* "up to date" — status only */
  --warn: #9c5d00;          /* pending security work, support ending */
  --alert: #c02a22;         /* out of support, failed run */

  --tint-ok: color-mix(in srgb, var(--ok) 10%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 11%, var(--surface));
  --tint-alert: color-mix(in srgb, var(--alert) 10%, var(--surface));
  --tint-alert-row: color-mix(in srgb, var(--alert) 4%, var(--surface));

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 12px 30px rgba(18, 18, 21, .08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 32px;
  --space-6: 64px;

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The dashboard's type scale, in rem so it follows the browser's text
     size. The website keeps the pixel sizes of site.css. */
  --text-label: 0.625rem;   /* 10px — column titles, chips */
  --text-data: 0.71875rem;  /* 11.5px — releases, counts, timestamps */
  --text-host: 0.8125rem;   /* 13px — hostnames, summary labels */
  --text-ui: 0.9375rem;     /* 15px — controls, body in the dashboard */
  --text-lead: 1.0625rem;   /* 17px — prose */
  --text-stat-quiet: 1.3125rem; /* 21px */
  --text-stat: 2rem;        /* 32px */

  --motion: 120ms ease-out; /* colour and background changes, nothing else */
}

/* The dark theme — the website's and the dashboard's, following the system
   setting (docs/DESIGN.md §"Colour"). The two blocks are the same values: one
   follows the system, the other is forced by the component gallery; the token
   test holds them equal. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --surface: #18181b;
    --surface-2: #202024;
    --border: #2d2d32;
    --border-soft: #242428;
    --border-field: #64646a;
    --text: #d6d6db;
    --text-strong: #f2f2f4;
    --muted: #8a8a93;
    --muted-2: #55555c;
    --action: #245dd1;
    --action-ink: #ffffff;
    --ok: #41a376;
    --warn: #c38427;
    --alert: #f45e56;
    --tint-ok: color-mix(in srgb, var(--ok) 16%, var(--surface));
    --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
    --tint-alert: color-mix(in srgb, var(--alert) 16%, var(--surface));
    --tint-alert-row: color-mix(in srgb, var(--alert) 7%, var(--surface));
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --bg: #111113;
  --surface: #18181b;
  --surface-2: #202024;
  --border: #2d2d32;
  --border-soft: #242428;
  --border-field: #64646a;
  --text: #d6d6db;
  --text-strong: #f2f2f4;
  --muted: #8a8a93;
  --muted-2: #55555c;
  --action: #245dd1;
  --action-ink: #ffffff;
  --ok: #41a376;
  --warn: #c38427;
  --alert: #f45e56;
  --tint-ok: color-mix(in srgb, var(--ok) 16%, var(--surface));
  --tint-warn: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --tint-alert: color-mix(in srgb, var(--alert) 16%, var(--surface));
  --tint-alert-row: color-mix(in srgb, var(--alert) 7%, var(--surface));
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0s; }
}