/* The design tokens. Rendered from apps/saas/src/design/tokens.ts.
   This is the only stylesheet that contains a colour value; every other
   file asks for var(--name). Served at /design/tokens.css. */

:root {
  color-scheme: light;
  /* Ink — the text, and everything that reads as text
     Two inks and nothing between them. `--ink` is a very dark grey rather than pure black: on a white page, pure black is harsh, and the difference costs nothing in contrast (18.9:1 against 21:1). */
  --ink: rgb(17 17 17);
  --ink-muted: rgb(102 102 102);
  --on-accent: rgb(255 255 255);

  /* Surfaces — the page, a panel, a card
     Two of the three are the same white, and that is on purpose: a card on the page is separated by its hairline, not by a second shade. `--surface` is the one step down, for table headers and quiet panels. */
  --paper: rgb(255 255 255);
  --surface: rgb(249 249 249);
  --card: rgb(255 255 255);

  /* Lines
     `--line` is decoration — a rule under a table header, the edge of a card — and a decorative edge is allowed to be faint. `--line-strong` is a boundary a person has to see to use the control, so it clears 3:1 and is the one a form field is drawn with. */
  --line: rgb(232 232 232);
  --line-strong: rgb(138 138 138);

  /* The accent — three options, one chosen
     One accent, shown to Amr three ways on the style page. He chose option 1, Ink blue, on 2026-10-01 (D01b). Each one is dark enough to be read as text on white AND to carry white text on itself, so the same value works for a link and for the button beside it. The three are an ink blue, a deep green and a clay — a cool, a natural and a warm, since the base is black and white and this is the only colour the product will have. Changing the choice is changing the three live tokens below and the `chosen` mark here, which a test holds together. */
  --accent-1: rgb(28 78 216);
  --accent-1-strong: rgb(17 55 154);
  --accent-1-tint: rgb(240 244 255);
  --accent-2: rgb(21 106 74);
  --accent-2-strong: rgb(14 76 53);
  --accent-2-tint: rgb(240 248 244);
  --accent-3: rgb(150 47 30);
  --accent-3-strong: rgb(116 36 23);
  --accent-3-tint: rgb(252 243 240);

  /* What the app actually uses — the live choice
     Every component asks for `--accent`, `--accent-strong` and `--accent-tint`, never for one of the three options by name. So choosing an accent is these three lines and nothing else, and the style page can show all three at once by overriding them in a box. */
  --accent: var(--accent-1);
  --accent-strong: var(--accent-1-strong);
  --accent-tint: var(--accent-1-tint);
  --focus-ring: var(--ink);

  /* Status — inbox health, and the fourth state
     Four roles, and each is one colour plus the tint it sits on and the line that edges it. The word is always shown beside the colour, never replaced by it: the first customer's inbox will be read by somebody who cannot separate red from green, and a badge that means `broken` only when it is red means nothing to them. Undetermined is a state rather than an absence — the app is forbidden from guessing (rule 5), so there has to be a colour for `we do not know yet`. */
  --status-working: rgb(15 102 54);
  --status-working-tint: rgb(240 248 243);
  --status-working-line: rgb(198 226 208);
  --status-warning: rgb(122 73 0);
  --status-warning-tint: rgb(255 248 235);
  --status-warning-line: rgb(233 214 173);
  --status-broken: rgb(153 27 27);
  --status-broken-tint: rgb(254 242 242);
  --status-broken-line: rgb(240 200 200);
  --status-undetermined: rgb(82 82 82);
  --status-undetermined-tint: rgb(245 245 245);
  --status-undetermined-line: rgb(219 219 219);

  /* Type
     The system font stack, so the app has no font file to load, no layout shift and nothing to fail. A font of its own is a later ticket, and this is the token it would replace. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --tracking-wide: 0.04em;

  /* Space
     A scale rather than a set of numbers, so nobody has to decide whether a gap is 14 or 16 pixels. Every gap in the app is one of these eight. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape and layout
     One radius per kind of thing rather than per component, and the three measurements the app frame is built from. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);
  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;
  --content-max: 62rem;
  --page-gutter: 1.5rem;
  --control-height: 2.5rem;
  --focus-width: 2px;
  --focus-offset: 2px;

}