/* Pincite — "Record" design system: tokens for the application surfaces.

   THE PALETTE IS SHARED WITH THE MARKETING SITE. The `:root` colour blocks below are
   byte-compared against `site/style.css` by `tests/guards/test_design_tokens.py`: a
   colour changed in one file and not the other fails CI. The two files exist separately
   only because they are deployed by different pipelines onto different origins (the app
   box via git archive, the site via Cloudflare Pages) and neither may import the other.

   Constraints, same as the site: no webfonts, no CDN, no remote images. Theme is
   `prefers-color-scheme` only — no toggle, no persisted preference, no script.

   The rule that decides sans vs mono, on every surface: if a string comes out of the
   system — a timestamp, a speaker label, a digest, a filename, a recording id, an error
   code — it is mono. No exceptions. */

/* ---- the `hidden` attribute wins (#558) ----------------------------------------------
   `[hidden] { display: none }` is a USER-AGENT declaration, and any AUTHOR `display:` on the
   same element beats it regardless of specificity — so `el.hidden = true` on an element some
   rule gives a `display` to sets the attribute and paints nothing. The app hit that five times
   (`#tx-video`, `#tx-waveform-canvas`, `.tx-gaps`, `.tx-gap-notice`, the folded roster rows)
   and answered it five times with a per-element `x[hidden] { display: none }`, each found
   AFTER shipping, because the guards read source text and none of them models the cascade.

   This is the class-retiring fix, and it lives in the ONE sheet every template links first.
   `!important` is the point: it is what makes an author `display` on the same element lose,
   and it is the only place in these sheets where it is justified — anywhere else it is a
   specificity fight hidden from the reader. `hidden` is this codebase's standard visibility
   toggle (templates ship furniture `hidden`; every page script assigns `.hidden`), so the rule
   below is what makes that toggle mean what it says. Held by
   tests/guards/test_hidden_wins_the_cascade.py, which resolves every `.hidden =` in
   static/js/ to the author rules that would otherwise beat it. */
[hidden] { display: none !important; }

:root {
  /* ---- color: light (default) ---- */
  --bg: #fbf9f5;          /* page paper */
  --surface: #ffffff;     /* cards, figures, certificate */
  --ink: #1c1b18;         /* headings, primary text */
  --ink-muted: #56534b;   /* body support, captions, meta */
  --panel: #f4f0e8;       /* banded section surface */
  /* --panel and the --affordance pair arrived with the marketing-site reskin
     (MARKETING_SITE_SPEC.md §9 amendment 27). They are declared here because the palette
     is ONE palette in two files — test_design_tokens.py compares them, and a colour that
     exists on the site and not here is the fork that guard exists to prevent.
     Said out loud: no app component consumes them yet. The app still spends --accent on
     links and focus, which is the very conflation the site just resolved; rewiring the
     app's components is its own change with its own review, not a side effect of a
     marketing reskin. --affordance-inverse (#479) arrived the same way and for the same
     reason: no app surface paints --ink as a ground today, and if one ever does, this is
     the value it takes rather than a second gold invented next to this one. */
  --accent: #6d2020;      /* the problem: gap markers, unverified flags */
  --accent-lift: #8f2b2b; /* hover + active ONLY; base accent is static */
  --affordance: #7d5f32;  /* the interaction: links, eyebrows, focus */
  --affordance-lift: #5f4826;
  --affordance-inverse: #cba765;  /* the interaction, on an INVERTED ground (--ink) */
  --gutter: #6f695c;      /* rail numbers, field labels — AA at 12px */
  --rule: #e4ded1;        /* section and card borders */
  --rule-soft: #efeae0;   /* interior dividers */
  --code-bg: #f0ebe1;     /* inline code, strip headers, gap-marker field */
  --redact: #ddd6c8;      /* redaction bars — no other use, ever */

  /* ---- type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step-0: 1.0625rem;     /* 17px body,  lh 1.65 */
  --step-1: 1.25rem;       /* 20px h3,    lh 1.30, track -0.008em, weight 640 */
  --step-2: 1.5rem;        /* 24px lead,  lh 1.32, track -0.012em, weight 600 */
  --step-3: 2rem;          /* 32px h2,    lh 1.20, track -0.018em, weight 650 */
  --step-4: 2.75rem;       /* 44px h1,    lh 1.08, track -0.025em, weight 700 */
  --step-mono: 0.8125rem;  /* 13px artifacts */
  --step-label: 0.6875rem; /* 11px mono caps, track 0.14em */

  /* ---- space ---- */
  --space-1: 0.5rem;    /* 8  */
  --space-2: 0.875rem;  /* 14 */
  --space-3: 1.375rem;  /* 22 */
  --space-4: 2.25rem;   /* 36 */
  --space-5: 3.5rem;    /* 56 */
  --space-6: 5rem;      /* 80 */

  /* ---- structure ---- */
  --measure: 38rem;     /* prose line length */
  --page: 46rem;        /* single-column page shell */
  --page-wide: 72rem;   /* the transcript surfaces, which need the width */
  --rail: 3.5rem;       /* 56px rail column */
  --rail-gap: 1.5rem;   /* 24px rail-to-content */

  /* ---- radius: cards and figures, chips, the step numeral. Nowhere else, and no
     shadows anywhere. ---- */
  --radius-card: 4px;
  --radius-chip: 3px;

  /* ---- transcript annotation colours — an app-only extension, declared here so it
     is visible rather than buried in review.css ------------------------------------
     The site spends the accent on exactly five things and nothing signals status by
     colour. The transcript surfaces cannot honour that: they must distinguish
     low-confidence words, unscored words, and gap notices AT A GLANCE while an
     attorney reads or scrubs audio,
     and three states cannot share one accent. So it gets three additional hues, warm
     enough to sit in this palette, each carrying a non-colour cue as well (weight, an
     underline, or the mono gap band) so the distinction survives a colour-blind reader
     and a greyscale print. These are the ONLY colours in the system outside the eleven
     tokens above, they are confined to the two transcript surfaces — the review pane and,
     since #259, the read-only webview — and they are named for what they mean rather than
     what they look like. */
  --flag-low: #8a3324;        /* low model confidence */
  --flag-low-field: #f6e7e2;
  --flag-unscored: #5b4a20;   /* no confidence score returned at all */
  --flag-unscored-field: #f3ecdb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141312;
    --surface: #1b1917;
    --panel: #1a1817;
    --ink: #e8e4dc;
    --ink-muted: #a29c91;
    --accent: #e08b8b;
    --accent-lift: #f0b0b0;
    --affordance: #b08a50;
    --affordance-lift: #cba765;
    --affordance-inverse: #5f4826;
    --gutter: #8f887c;
    --rule: #302c27;
    --rule-soft: #24211e;
    --code-bg: #24211e;
    --redact: #322e29;

    --flag-low: #e8a598;
    --flag-low-field: #33211d;
    --flag-unscored: #d8c48a;
    --flag-unscored-field: #2b2618;
  }
}

/* This buyer prints things — a review pane gets printed and marked up on paper as
   often as it gets read on screen. Make it survive paper. */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --panel: #ffffff;
    --ink: #000000;
    --ink-muted: #333333;
    --accent: #000000;
    --accent-lift: #000000;
    --affordance: #000000;
    --affordance-lift: #000000;
    --affordance-inverse: #ffffff;
    --gutter: #555555;
    --rule: #999999;
    --rule-soft: #cccccc;
    --code-bg: #ffffff;
    --redact: #cccccc;

    --flag-low: #000000;
    --flag-low-field: #ffffff;
    --flag-unscored: #000000;
    --flag-unscored-field: #ffffff;
  }
}