/* ============================================================================
 * AnswerLab design tokens, ported for the staff application.
 *
 * SOURCE: the "[Experimental] AnswerLab Report Design System" project on
 * claude.ai/design (owner: Max), file `colors_and_type.css`, pulled 2026-09-03.
 * Values below are that file's, not invented here — do not "tidy" a hex, and
 * when the source moves, re-port rather than diverge.
 *
 * THREE DELIBERATE DEPARTURES, each marked DEPARTURE below and each because the
 * source is a *report and deck* system and this is a dense working record:
 *   1. a monospace face, which the source has no need of and does not define;
 *   2. a dark theme, which the source does not define at all;
 *   3. heading sizes, because the source's scale is deck-tuned (h2 is 30px,
 *      the cover is 120px) and a page with four table sections cannot carry it.
 *
 * The source's own brand rules that this file preserves:
 *   - sentence case for every headline, never Title Case
 *   - eyebrow labels are orange, 11px/500, letter-spaced, NOT uppercased
 *   - orange is for short text only (see the contrast note below)
 * ========================================================================== */

/* Outfit, the brand face. Self-hosted because CSP is `default-src 'self'` and
 * forbids every external host — there is no linking to Google Fonts here. This
 * is the variable woff2 (latin subset, 31.5 KB) rather than the source project's
 * ten TTFs: one file covers 100–900, and woff2 is a fifth the size. SIL Open
 * Font License 1.1, so vendoring is permitted. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Outfit-Variable.woff2") format("woff2-variations");
}

:root {
  /* ── Brand colours ─────────────────────────────────────────────────────── */
  --al-charcoal: #252429; /* Core Charcoal — primary text, dark surfaces */
  --al-yellow: #ffd42a; /* Illumination Yellow — primary highlight, CTA */
  --al-orange: #ff5e00; /* Signal Orange — accent, eyebrows, short labels */
  --al-white: #ffffff;
  --al-ivory: #fcf1e3; /* Canvas Ivory — warm panel */
  --al-blush: #fbddd7; /* Blush Light — soft panel */

  /* ── Extended palette ──────────────────────────────────────────────────── */
  --al-grey-light: #e0e0e0;
  --al-grey-mid: #c4c5c5;
  --al-orange-tint-1: #ffab7d;
  --al-yellow-tint: #ffe894;
  --al-red: #f34032;

  /* ── Semantic foreground / background ──────────────────────────────────── */
  --fg-1: var(--al-charcoal);
  --fg-2: #54535a;
  --fg-3: #8a8990;
  --fg-on-dark: var(--al-white);
  --bg-1: var(--al-white);
  --bg-2: var(--al-ivory);
  --bg-3: var(--al-blush);
  --bg-page: #faf9f7; /* DEPARTURE: a ground the white surfaces can sit on. */
  --divider: var(--al-grey-light);

  /* LINK COLOUR IS NOT ORANGE, and that is a correction to the source.
   *
   * `colors_and_type.css` defines `--fg-accent: var(--al-orange)` for "eyebrow /
   * links", while `approved-combos.html` warns orange "may not meet WCAG AA at
   * body sizes". Measured: #FF5E00 on #FFFFFF is 3.06:1 — it fails AA for normal
   * text (4.5:1) and passes only for large text and UI graphics (3:1). At this
   * app's 15px body it fails, so links are charcoal and underlined, and orange is
   * held back for eyebrows, short labels and numbers exactly as the note says.
   *
   * The inverse is why the dark theme below differs rather than inverting: orange
   * on charcoal measures 5.03:1 and DOES pass, so orange can carry links there.
   * Worth flagging to the source project — the token's documented role is safe in
   * one theme and not the other. */
  --fg-accent: var(--al-orange); /* eyebrows and short labels ONLY */
  --fg-link: var(--al-charcoal);

  /* State colours, built only from approved combos — every one is charcoal text
   * on a brand panel, so none of them needed inventing. */
  --state-live-bg: var(--al-yellow);
  --state-live-fg: var(--al-charcoal);
  --state-withdrawn-bg: var(--al-blush);
  --state-withdrawn-fg: #8f2018;
  --state-pending-bg: var(--al-ivory);
  --state-pending-fg: #8a4a06;
  --state-quiet-bg: #f1f1f2;
  --state-quiet-fg: var(--fg-2);

  /* A solid secondary button needs a ground that contrasts with the SURFACE, not an
   * absolute colour: the source's charcoal fill is invisible in a dark theme whose
   * surface is charcoal. */
  --btn-solid-bg: var(--al-charcoal);
  --btn-solid-bg-hover: #3a3940;
  --btn-solid-fg: var(--al-white);

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  /* DEPARTURE: the source defines no monospace, reasonably — reports and decks
   * have no slugs, digests, token strings or byte counts. This application is
   * mostly those, and a value a researcher may have to quote to a client should
   * look like a value. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --tracking-tight: -0.022em;

  --fs-body: 15px;
  --fs-small: 11px;
  /* DEPARTURE: the source's h1 is 35px and h2 is 30px, tuned for a report cover.
   * This app's report page carries four table sections under one title, so the
   * page title takes the source's h3 (24px) and section headings its h4 (19px).
   * The scale is still the source's — only which step each role uses changed. */
  --fs-title: 24px;
  --fs-section: 19px;

  --lh-heading: 1.2;
  --lh-body: 1.45;
  /* Pinned so --label-block below is computable. Without an explicit value the label
   * inherits --lh-body and the arithmetic silently depends on it. */
  --lh-label: 1.4;

  /* ── Form-row geometry ───────────────────────────────────────────────────
   * One height for every control that can sit on a form row, and the exact height
   * of the label block above it. A form row mixes a text input, a native file input
   * and a textarea, and their intrinsic heights all differ — the file input's inner
   * button makes it the tallest — so without these two, "align the button with the
   * fields" has no single answer and the button drifts to whichever field is
   * tallest that day. See the alignment note in staff.css. */
  --control-h: 40px;
  --label-block: calc(var(--fs-small) * var(--lh-label) + var(--space-1));

  /* ── Spacing, radii, shadow — the source's, unchanged ──────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(37, 36, 41, 0.06);
}

/* ── DEPARTURE: the dark theme ───────────────────────────────────────────────
 *
 * The source defines no dark tokens beyond `--bg-dark` and `--fg-on-dark`, so
 * everything here is derived and nobody should read it as brand-sanctioned.
 *
 * It is not an inversion. Two things carried over unchanged because they were
 * already the strongest pairings in the palette, and two had to change:
 *   - charcoal-on-yellow stays exactly as it is (10.8:1) — the live marker looks
 *     identical in both themes, which is the point of a signature;
 *   - orange becomes the link colour, because on charcoal it measures 5.03:1;
 *   - the ivory and blush panels cannot survive on a dark ground, so the state
 *     chips move to low-alpha washes of the same hues;
 *   - their text comes from the source's OWN extended tints, which turn out to be
 *     ideal here: --al-yellow-tint on charcoal is 12.6:1, --al-orange-tint-1 is
 *     8.35:1. Dark mode needed no new hues, only different roles.
 * SCOPED TO THE STAFF SURFACE, and that scoping is a design decision rather than
 * plumbing. `staff/base.html` sets `data-surface="staff"` on <html>; the client
 * templates set `client`, and so keep the light palette whatever the viewer's OS says.
 *
 * The reason is what the client pages are FOR. Their job is to frame a report authored
 * by a researcher — a single-file HTML document written once, with its own light
 * background and no theme awareness. A charcoal chrome around a white report is a white
 * slab floating on a dark ground: the frame fighting the thing it frames. Staff pages
 * have no such content to defer to, which is why they keep the dark theme.
 *
 * `:root[data-surface="staff"]` rather than a bare `:root` so specificity settles it
 * outright (0,2,0 against 0,1,0) instead of depending on this block staying below the
 * light one in the file.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root[data-surface="staff"] {
    --fg-1: #f2f1f3;
    --fg-2: #b6b5bb;
    --fg-3: #8a8990;
    --bg-1: #252429; /* the brand charcoal, as the surface */
    --bg-page: #1b1a1e; /* one step below it, so surfaces read as raised */
    --bg-2: #2e2d33;
    --bg-3: #2e2d33;
    --divider: rgba(255, 255, 255, 0.13);

    --fg-link: var(--al-orange-tint-1);

    --state-live-bg: var(--al-yellow);
    --state-live-fg: var(--al-charcoal);
    --state-withdrawn-bg: rgba(243, 64, 50, 0.18);
    --state-withdrawn-fg: #ffb4ac;
    --state-pending-bg: rgba(255, 212, 42, 0.14);
    --state-pending-fg: var(--al-yellow-tint);
    --state-quiet-bg: rgba(255, 255, 255, 0.07);
    --state-quiet-fg: var(--fg-2);

    --btn-solid-bg: #f2f1f3;
    --btn-solid-bg-hover: #ffffff;
    --btn-solid-fg: var(--al-charcoal);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}