/* rotascale.com — design tokens.
 *
 * subhadipmitra@: LIGHT ONLY. The site had a full dark theme (OS preference,
 * a toggle, a pre-paint script, paired logo and screenshot cuts). It was
 * removed in the September 2026 redesign, deliberately and completely: two
 * themes doubled every contrast check and every screenshot, and the second
 * one was never the one a buyer evaluated us in. `color-scheme: only light`
 * tells the browser not to auto-darken form controls or scrollbars either.
 *
 * The `--rs-*` names are the source of truth and match the design document
 * in `design/DESIGN-SYSTEM.md`. The short names underneath (`--paper`,
 * `--ink`, `--rule` …) are ALIASES kept because a hundred templates use them
 * and a rename would have been a hundred-file diff for no visual change. Do
 * not give an alias its own value: if a colour needs to move, move the
 * `--rs-*` token it points at.
 *
 * ## Why these neutrals
 *
 * The canvas is a warm off-white rather than pure white, and the evidence
 * surfaces (a record, the decision exhibit) are pure white on top of it. That
 * is the whole hierarchy: the thing you are meant to inspect is the whitest
 * thing on the page. Rules come in two strengths — `--rs-rule` for organising
 * space, `--rs-control-border` for controls and the lines a diagram actually
 * depends on — so a reader can tell a separator from a boundary.
 *
 * ## Contrast, checked against both grounds
 *
 *   text #232326        on #f8f8f5 → 14.6:1   on #ffffff → 15.6:1
 *   secondary #626265   on #f8f8f5 →  5.8:1   on #ffffff →  6.1:1   (small text OK)
 *   display-muted #747477 on #f8f8f5 → 4.4:1                        (LARGE text only)
 *   accent #b509ac      on #f8f8f5 →  5.5:1   white on accent →  5.8:1
 *   success #37634e     on #ffffff →  6.9:1   stop #963c32 on #ffffff → 7.0:1
 *   review #7d5a1f      on #ffffff →  6.3:1
 *
 * `--rs-text-display-muted` is therefore used for one thing: the second line
 * of a display heading. It is never a body or label colour.
 */

:root {
  color-scheme: light;
  color-scheme: only light;

  /* Grounds */
  --rs-bg: #f8f8f5;
  --rs-surface: #ffffff;
  --rs-surface-muted: #f1f1ed;

  /* Type */
  --rs-text: #232326;
  --rs-text-secondary: #626265;
  --rs-text-display-muted: #747477;

  /* Rules */
  --rs-rule: #d6d6d0;
  --rs-control-border: #80807e;

  /* Accent: primary actions, keyboard focus, the selected inspection subject.
     Nothing else. */
  --rs-accent: #b509ac;
  --rs-accent-hover: #94088c;
  --rs-accent-soft: #faf2f9;
  --rs-on-accent: #ffffff;

  /* Outcomes. Three, because the product has three answers a reader must
     never confuse: it held, it stopped, it needs a person. */
  --rs-success: #37634e;
  --rs-stop: #963c32;
  --rs-review: #7d5a1f;

  /* Text selection: tinted from the accent so a highlight reads as ours
     without making the words under it harder to read. */
  --rs-selection: #efd6ec;

  --rs-radius: 2px;

  /* Type families. One sans for display and reading, one mono for anything
     that appears as it appears in a record — and they are the same family.
     IBM Plex Sans and IBM Plex Mono were drawn together, so a gate name in
     mono beside its explanation in sans reads as one voice rather than two.
     Plex Sans is one variable file: display sits at 470, labels at 500,
     strong text at 600. See fonts.css for why it is self-hosted. */
  --rs-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --rs-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shell */
  --rs-wrap: 1440px;
  --rs-inset: 80px;

  /* ---- aliases, in the order the old file declared them ---------------- */
  --paper: var(--rs-bg);
  --paper-2: var(--rs-surface-muted);
  --surface: var(--rs-surface);
  --rule: var(--rs-rule);
  --rule-hard: var(--rs-control-border);
  --ink: var(--rs-text);
  --ink-2: var(--rs-text-secondary);
  --muted: var(--rs-text-secondary);
  --on-ink: var(--rs-surface);

  --accent: var(--rs-accent);
  --accent-hover: var(--rs-accent-hover);
  --accent-soft: var(--rs-accent-soft);
  --on-accent: var(--rs-on-accent);
  --select: var(--rs-selection);

  --allow: var(--rs-success);
  --deny: var(--rs-stop);
  --review: var(--rs-review);

  --sans: var(--rs-font-sans);
  --mono: var(--rs-font-mono);

  --wrap: var(--rs-wrap);
  --gutter: var(--rs-inset);
}

/* The inset steps with the reference: 80 → 48 → 32 → 22 → 18. */
@media (max-width: 1250px) { :root { --rs-inset: 48px; } }
@media (max-width: 820px)  { :root { --rs-inset: 32px; } }
@media (max-width: 640px)  { :root { --rs-inset: 22px; } }
@media (max-width: 355px)  { :root { --rs-inset: 18px; } }