/* Quadrat — direction A, "the survey sheet". Owner decision 2026-10-11.
   Every colour, size and spacing the site uses is a custom property here; no other stylesheet carries a
   hex value, a font name or a pixel size that is not one of these. Record additions in DESIGN.md. */
:root {
  /* ground and ink */
  --paper: #FFFFFF;
  --paper-2: #F4F5F3;        /* table header rows, quiet panels */
  --ink: #222222;
  --ink-2: #4A4F48;          /* secondary text; 4.5:1 on paper */
  --rule: #DADDD8;
  --rule-2: #ECEEEA;         /* table row rules */

  /* brand: one green, used for the wordmark, the one action, section numbers */
  --moss: #3B5A2A;
  --moss-ink: #2E4720;       /* hover */
  --moss-paper: #EEF3EA;     /* drop zone fill, current-menu underline only via --moss */

  /* flags: amber is reserved for ▲ and ⚠ and for nothing else */
  --flag: #B45309;
  --flag-ink: #7A3E06;       /* verdict text on --flag-paper; 7:1 */
  --flag-paper: #FDF3E3;

  /* a clean verdict (no items in A) */
  --clear-ink: #2E4720;
  --clear-paper: #EEF3EA;

  /* type */
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --size-1: 2.75rem;         /* page title, 44px, line-height 1.1 */
  --size-2: 1.625rem;        /* section heading, 26px, 1.2 */
  --size-3: 1.25rem;         /* sub-heading, 20px, 1.3 */
  --size-4: 1.0625rem;       /* body, 17px, 1.5 */
  --size-5: 0.9375rem;       /* table cells, small text, 15px, 1.5 */
  --size-6: 0.875rem;        /* mono labels, captions, 14px */

  /* spacing, an 8px scale */
  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 3.5rem; --s-7: 4.5rem;

  --measure: 68ch;           /* max width of running text */
  --page: 1120px;            /* max width of the page content */
  --gutter: 2rem;            /* side padding, 1.5rem under 600px */
  --radius: 4px;             /* buttons, inputs */
  --radius-2: 6px;           /* panels, drop zones */
  --target: 44px;            /* minimum tap height */

  /* added for the components (DESIGN.md, "Added tokens"): the brief names these sizes in pixels and
     site.css may not carry a pixel value that is not a token */
  --size-wordmark: 1.375rem; /* 22px, the wordmark */
  --size-menu: 1rem;         /* 16px, the menu words */
  --gap-menu: 1.375rem;      /* 22px between menu words */
  --gap-glyph: 0.875rem;     /* 14px between a flag glyph and its text */
  --pad-btn: 1.375rem;       /* 22px, a button's side padding */
  --pad-cell: 0.75rem;       /* 12px, a table cell's side padding */
  --pad-band: 1.125rem;      /* 18px, the verdict band's vertical padding */
  --line: 1px;               /* rules, table borders, secondary drop zone */
  --line-2: 2px;             /* primary drop zone, current-menu underline, focus outline, form error */
  --underline: 3px;          /* text-underline-offset on links */
  --icon: 1.125rem;          /* 18px, the padlock */
  --icon-2: 1.375rem;        /* 22px, the wordmark's quadrat */
  --icon-3: 2.25rem;         /* 36px, the upload arrow */
  --drop-min: 240px;         /* primary drop zone, desktop */
  --drop-min-phone: 180px;   /* primary drop zone, phone */
  --input-min: 3.5rem;       /* the seat-key textarea */
  --size-price: 2.25rem;     /* 36px, the two prices on the Pricing panel */
  --col-contents: 1fr;       /* report contents column */
  --col-findings: 2fr;       /* report findings column */
  --moss-paper-2: #E2EBDC;   /* drop zone fill one step darker, on dragover and keyboard focus */
  --print-paper: #FFFFFF;    /* print: black on white, whatever the scheme */
  --print-ink: #000000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161A17; --paper-2: #1F2420; --ink: #E8EDE9; --ink-2: #B8C0BA;
    --rule: #2E352F; --rule-2: #262C28;
    --moss: #8FB57A; --moss-ink: #A9C99A; --moss-paper: #1E2A1A;
    --flag: #E8A04A; --flag-ink: #F5C27A; --flag-paper: #2E2214;
    --clear-ink: #A9C99A; --clear-paper: #1E2A1A;
    --moss-paper-2: #263621;
  }
}
@media (max-width: 720px) {
  :root { --gutter: 1.5rem; --size-1: 2rem; --drop-min: var(--drop-min-phone); }
}

/* the fonts: self-hosted, Latin subset, OFL (site/fonts/OFL.txt). Nothing is fetched from anyone else. */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/IBMPlexSans-400-500-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/IBMPlexMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/IBMPlexMono-500-latin.woff2') format('woff2');
}