/* Form H design tokens. See docs/superpowers/specs/2026-08-09-form-h-design-system.md
 *
 * Every colour is defined here on bare :root first, then redefined for the two
 * dark states. Nothing below may declare a colour only inside a media or
 * [data-theme] block: the viewer's default is "system", which stamps no
 * attribute at all, and a colour that exists only behind [data-theme] would
 * never apply there. */

:root {
  /* -------------------------------------------------------------- colour */
  /* Paper-first. Neutrals carry a warm bias so they read as chosen rather
     than inherited from a default grey ramp. */
  --paper: #FCFCFB;
  --fill: #EDEDE9;
  --ink: #0A0A0A;
  --rule: #CFCFC9;
  --muted: #5A5A56;
  --seal: #5B4B8A;

  /* Semantic, never decorative. Each is always paired with a word and a
     border, so state survives greyscale and colour blindness. */
  --sig-critical: #C8102E;
  --sig-verified: #1E5B3A;
  --sig-pending: #8A6A1F;
  /* Tinted grounds for the notice blocks. */
  --sig-critical-wash: #FDF3F4;
  --sig-verified-wash: #F1F7F3;
  --sig-pending-wash: #FBF7EC;

  --focus: #1F4FA8;

  /* ---------------------------------------------------------- typography */
  /* Three families, three speakers. --f-ui is the system talking, --f-record
     is the human content being registered, --f-data is machine fact.
     All are system faces: the app forbids external asset loading, and a
     silent webfont fallback would break a design this typographic. */
  --f-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-record: Georgia, "Iowan Old Style", "Times New Roman", ui-serif, serif;
  --f-data: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: 0.6875rem;
  --t-sm: 0.75rem;
  --t-cap: 0.8125rem;
  --t-sub: 0.9375rem;
  --t-body: 1rem;      /* 16px floor */
  --t-lead: 1.1875rem;
  --t-h3: 1.5rem;
  --t-h2: 2rem;
  --t-h1: 2.75rem;

  --track-label: 0.12em;

  /* -------------------------------------------------------------- layout */
  --measure: 46rem;
  --gap-xs: 0.35rem;
  --gap-sm: 0.6rem;
  --gap-md: 1rem;
  --gap-lg: 1.75rem;
  --gap-xl: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C0D0C;
    --fill: #161815;
    --ink: #E9E9E4;
    --rule: #2E312E;
    --muted: #9A9A93;
    --seal: #A493D6;

    --sig-critical: #FF6376;
    --sig-verified: #6FCF97;
    --sig-pending: #E0B44A;
    --sig-critical-wash: #1D1315;
    --sig-verified-wash: #101A14;
    --sig-pending-wash: #1B1710;

    --focus: #8FB4DA;
  }
}

:root[data-theme="dark"] {
  --paper: #0C0D0C;
  --fill: #161815;
  --ink: #E9E9E4;
  --rule: #2E312E;
  --muted: #9A9A93;
  --seal: #A493D6;

  --sig-critical: #FF6376;
  --sig-verified: #6FCF97;
  --sig-pending: #E0B44A;
  --sig-critical-wash: #1D1315;
  --sig-verified-wash: #101A14;
  --sig-pending-wash: #1B1710;

  --focus: #8FB4DA;
}