/*
 * 4All.Help design canon: the tokens. Owner-approved 2026-10-16 (docs/design/4ALL-DESIGN-CANON.md is the specification).
 * This is the ONLY file in which a colour literal may be written. Every other 4all.help stylesheet reads these with var(--fa-*).
 * tests/fourall-design-canon.test.js fails if this file, the document and the pages disagree.
 */
:root {
  /* Palette: obsidian. The owner's brief of 2026-10-19 (a high-contrast, institutional dark theme, one warm accent) replaced the sage and deep green
     of the same day. Neutral zinc greys carry the surfaces and the type; ONE accent (violet) carries every action, kicker and focus ring.
     Every pair is checked by tests/fourall-design-canon.test.js. */
  --fa-page: #09090B;            /* the main page background */
  --fa-element: #B79CF7;         /* every action: buttons, selected chips, step numbers, icons, the focus ring (violet) */
  --fa-element-hover: #CBB8FA;
  --fa-element-disabled: #8B8B94;
  --fa-on-element: #09090B;      /* labels and icons on an element */
  --fa-panel: #121215;           /* text boxes: cards, panels, the answer */
  --fa-panel-alt: #18181B;       /* a raised surface: chips, cards inside a band, table cells */
  --fa-panel-deep: #222227;      /* hover and the recessed quote: quoted rule text, code */
  --fa-field: #050507;           /* the typing surface: the question box and the select, deeper than the page */
  --fa-ink: #F4F4F5;             /* primary font colour */
  --fa-ink-2: #D4D4D8;           /* secondary font colour */
  --fa-ink-3: #A1A1AA;           /* tertiary font colour: hints, captions */
  --fa-line: #27272A;            /* decorative borders and dividers of cards and bands only, never the edge of a control */
  --fa-edge: #71717A;            /* the edge of a control (3 : 1 or better on the page, a panel and the typing surface) */
  --fa-accent: #B79CF7;          /* violet: the one accent (kickers, the sub-headline, the free badge); text on a panel or on the page */
  --fa-on-accent: #09090B;       /* the label on an accent fill */

  /* Channel triplets, for alpha tints of the bases: rgb(var(--fa-element-rgb) / .18) */
  --fa-element-rgb: 183 156 247;
  --fa-page-rgb: 9 9 11;
  --fa-panel-rgb: 18 18 21;
  --fa-ink-rgb: 244 244 245;

  /* Type: Inter, self-hosted. 13 px is the minimum size of any text. */
  --fa-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fa-fs-label: 13px;
  --fa-fs-small: 15px;
  --fa-fs-body: 17px;
  --fa-fs-card: 20px;
  --fa-fs-section: clamp(24px, 2.6vw, 28px);
  --fa-fs-headline: clamp(32px, 4.2vw, 52px);

  /* Space (8 px scale), shape, elevation, focus */
  --fa-s1: 4px;
  --fa-s2: 8px;
  --fa-s3: 12px;
  --fa-s4: 16px;
  --fa-s5: 24px;
  --fa-s6: 32px;
  --fa-s7: 48px;
  --fa-s8: 64px;
  --fa-s9: 96px;
  --fa-radius: 6px;
  --fa-radius-sm: 4px;
  --fa-shadow: 0 1px 0 rgb(var(--fa-ink-rgb) / .05) inset, 0 24px 56px rgb(var(--fa-page-rgb) / .7);
  --fa-focus: 3px solid var(--fa-element);
  --fa-focus-offset: 2px;
  --fa-touch: 44px;
  --fa-fade: 150ms;

  /* Photograph scrim (Conclave S6 = T3): a page-colour gradient along the bottom of a jurisdiction photograph carries the caption in --fa-ink and --fa-ink-2.
     The numbers are pixels and opacities so the caption always sits on the same background; tests/fourall-jurisdiction-imagery.test.js
     recomputes the worst-case text contrast of every photograph from exactly these values (4.5 : 1 or better, at 390, 768, 1280 and 1440 px). */
  --fa-scrim-height: 132px;
  --fa-scrim-solid: 72px;
  --fa-scrim-alpha-base: .94;
  --fa-scrim-alpha-solid: .86;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--fa-page); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--fa-ink);
  background: var(--fa-page);
  font-family: var(--fa-font);
  font-size: var(--fa-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, textarea, input, select { font: inherit; }
:focus-visible { outline: var(--fa-focus); outline-offset: var(--fa-focus-offset); }
::selection { color: var(--fa-on-element); background: var(--fa-element); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}