/*
 * The one place joblit.app's design tokens live.
 *
 * Before this, the same tokens were hand-copied into four files that had drifted
 * apart — shared.css, index.html, j/ and privacy/ — in three naming schemes,
 * with a light-themed privacy page. Every page now links this file first and
 * defines none of its own, so a change here reaches the whole product and the
 * copies can't disagree again.
 *
 * Transcribed from the app's src/theme/index.ts (which the static web can't
 * import). Colour roles follow the app's split: `accent` is a FILL only; text,
 * strokes and rings take `accent-ink`; the primary button is `solid` (white).
 */
:root {
  /* surfaces — each step roughly doubles the one below it
   *
   * The first ladder was 0 / 0.0037 / 0.0076 in relative luminance, which put a
   * card 1.075:1 against the page. Measured off a real render of the board, the
   * page came back L=0.0034 and the detail pane L=0.0081 — a difference of
   * 0.0048, which on a phone in daylight is one colour. Nothing lifted, so
   * every card read as a rectangle of text rather than an object.
   *
   * Doubling each step is what makes the stack legible while staying dark:
   * 0 / 0.0071 / 0.0139 / 0.0245. White stays at 18.4:1 on a card and faint
   * text at 3.63:1, both clear of the bars this product holds (4.5 / 4.5 / 3.0),
   * so the lift costs no contrast. Re-measure those three if these move. */
  --bg: #000000;
  --surface: #141417;     /* a card on the page */
  --raised: #1F1F23;      /* an input or panel inside a card */
  --overlay: #2B2B30;     /* sheets and menus */
  --line: #2F2F34;        /* hairline border */
  --line-soft: #232327;   /* divider inside a group */
  --line-strong: #3A3A40; /* the edge of something hovered or emphasised */

  /* accent — a fill, and only a fill */
  --accent: #2F4FD6;
  --accent-pressed: #2540B4;
  --accent-ink: #8FB0FF;  /* accent as TEXT, strokes, the score ring's arc */
  --accent-soft: #141B33; /* a tinted fill behind a selected thing */
  --on-accent: #FFFFFF;   /* text on an accent fill */

  /* the primary control: a white pill with a black label */
  --solid: #FFFFFF;
  --on-solid: #000000;

  /* text — three neutral weights, no cast */
  --text: #FFFFFF;
  --text-muted: #A1A1A6;
  --text-faint: #6E6E73;

  /* state — never emphasis */
  --good: #3DDC97;
  --good-soft: #10281E;    /* the fill behind `good` text, e.g. a pay chip */
  --warn: #F5B94A;
  --bad: #FF6B85;

  /* spacing — roles, not sizes */
  --tight: 8px;
  --group: 16px;
  --gutter: 20px;
  --section: 32px;
  --major: 56px;

  --radius: 14px;

  /* type scale — the app's ramp, finally tokenised. size / line pairs. */
  --fs-hero: 56px;    --lh-hero: 58px;
  --fs-display: 40px; --lh-display: 46px;
  --fs-title: 28px;   --lh-title: 34px;
  --fs-heading: 20px; --lh-heading: 26px;
  --fs-body: 17px;    --lh-body: 24px;
  --fs-label: 15px;   --lh-label: 20px;
  --fs-caption: 13px; --lh-caption: 16px;
}

/* Native controls (checkboxes, range tracks, scrollbars) render light by
   default; a stark white control on near-black reads as a bug. This says the
   whole product is dark. */
:root { color-scheme: dark }