/* Global design tokens, following the Vantomask mockups (turn 3a desktop, 4a/4b
   mobile).

   System fonts only — a web font would be a network call, and F12 requirement 8
   allows none. The mockups set labels and placeholders in IBM Plex Mono loaded
   from fonts.googleapis.com; that is precisely the request F13's `font-src
   'self'` blocks, so the monospace stack below stands in for it. The mockups'
   typographic intent — mono for anything the engine produced or matched, body
   sans for prose — is kept. */

:root {
  /* Read back by the E2E suite to confirm the stylesheet actually loaded rather
     than being blocked by CSP or served under the wrong MIME type. */
  --vantomask-css-loaded: 1;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The two editors are read across, line for line: the real text on the left
     and what it became on the right. So their line boxes have to be identical,
     not merely similar — they had 1.7 and 1.85, which is about two pixels a
     line, invisible at the top of the pane and a whole line out by the bottom.
     One variable, used by both, so they cannot drift apart again.

     1.85 rather than 1.7 because the output carries F15's wavy underlines at a
     0.2em offset and F08's padded marks; the taller box is the one with
     something in it that needs the room. */
  --editor-line-height: 1.85;

  /* Warm neutral ramp. The page sits a shade darker than the shell so the app
     reads as one card, the way it does in the mockups. */
  --colour-page: #eceae6;
  --colour-shell: #f7f7f6;
  --colour-surface: #ffffff;
  --colour-sunken: #f2f2f0;

  --colour-border: rgb(0 0 0 / 13%);
  --colour-border-soft: rgb(0 0 0 / 9%);
  --colour-border-strong: rgb(0 0 0 / 26%);

  --colour-text: #1a1a19;
  /* Darker than the mockups' rgb(0 0 0 / 45%): every muted label here clears AA
     against --colour-shell, which that value does not. */
  --colour-text-muted: #63625e;

  /* The one accent, in the mockups' own oklch ramp. */
  --colour-accent: oklch(0.52 0.11 252);
  --colour-accent-hover: oklch(0.42 0.12 252);
  --colour-accent-ink: oklch(0.38 0.11 252);
  --colour-accent-quiet: oklch(0.45 0.11 252);
  --colour-accent-surface: oklch(0.93 0.035 252);
  --colour-accent-line: oklch(0.52 0.11 252 / 35%);
  --colour-accent-ring: oklch(0.52 0.11 252 / 9%);
  --colour-accent-text: #ffffff;

  /* The dark chip: the selected segment, and the popover that reveals what a
     stand-in covers. */
  --colour-ink: #1a1a19;
  --colour-ink-text: #ffffff;
  --colour-ink-label: rgb(255 255 255 / 55%);

  /* Contrast checked against --colour-surface for AA at normal text size. */
  --colour-error: #a3231b;
  --colour-error-surface: #fdecea;
  --colour-warning: #7a4a05;
  --colour-warning-surface: #fdf3e2;
  --colour-success: #14612e;
  --colour-success-surface: #e7f5ec;

  /* A replacement in the output. The mockups tint it with the accent rather than
     the highlighter yellow this used to use; the underline carries the same
     information for anyone who cannot separate the hues. */
  --colour-match: var(--colour-accent-surface);
  --colour-match-border: var(--colour-accent);

  /* F15 — a shape the analysis thinks should have been masked and was not. The
     one red on the page, and deliberately not the accent: it means the opposite
     of what a replacement means. 6.8:1 on --colour-sunken. */
  --colour-finding: #ad0000;

  --radius: 8px;
  --radius-small: 6px;
  --radius-pill: 20px;

  --gap: 1rem;
  --gap-small: 0.5rem;

  --shadow-card: 0 1px 3px rgb(0 0 0 / 7%);
  --shadow-pop: 0 5px 16px rgb(0 0 0 / 24%);
  --shadow-sheet: 0 -8px 26px rgb(0 0 0 / 13%);
}