/* Brick Domain design tokens
 * ============================================================================
 * The shared vocabulary for every page. Almost entirely tokens: the single
 * element rule at the foot of this file reserves the scrollbar gutter, and it is
 * here because it is the one thing that must be true on every page at once.
 * Everything else is a token, so linking this file changes nothing else about
 * how a page renders. That is deliberate.
 *
 * Where these came from
 * --------------------
 * Not invented. An audit of the eight main pages on 2026-09-08 found the colours
 * below already shared across all of them, hard-coded eight times over:
 *
 *     #6B8F71  85 uses, 8/8 pages      #1a1a2e  72 uses, 8/8 pages
 *     #2e7d32  21 uses, 8/8 pages      #f0f0f0  35 uses, 8/8 pages
 *
 * gc-wallet was the only page that had named any of them, in
 * static/css/gcwallet.css. The first thirteen tokens here are that block,
 * promoted verbatim so it can serve the whole site; gcwallet.css still declares
 * its own copies and still wins for that page, so it can be emptied later
 * without a flag day.
 *
 * Load order
 * ----------
 * Linked immediately after <title>, ahead of each page's inline <style> and
 * ahead of gcwallet.css. Everything that exists today therefore still overrides
 * these values. Pages adopt the tokens one at a time, by choice, not by being
 * overridden into them.
 */

:root {
  /* ---- promoted from gcwallet.css, unchanged ---- */
  --page-bg:      #f5f7f5;
  --ink:          #1a1a2e;
  --muted:        #777;
  --label:        #999;
  --line:         #eee;
  --row-line:     #f0f0f0;
  --row-hover:    #f8fdf9;
  --green:        #6B8F71;
  --green-dark:   #5A7A5E;
  --green-text:   #2e7d32;
  --card-shadow:  0 1px 4px rgba(0,0,0,0.07);
  --stat-shadow:  0 1px 6px rgba(0,0,0,0.06);
  --column:       1300px;

  /* ---- the rest of the shared palette, named for the first time ----
   * These are in use across most pages already; they simply had no name.
   * --border is the input and control edge (#e0e0e0, 6/8 pages); --border-soft
   * is the greener edge the tab and sort buttons use (#d0d8d0). Both are kept
   * because the audit found them doing different jobs, not because they drifted.
   */
  --surface:      #ffffff;
  --surface-sunk: #fafafa;
  --border:       #e0e0e0;
  --border-soft:  #d0d8d0;
  --ink-soft:     #555;
  --ink-faint:    #888;
  --ink-dim:      #aaa;
  --danger:       #c62828;

  /* Two colours the site had been using as tokens without naming them, found
   * in the 2026-09-08 sweep: a deep green for emphasis text and rules (66 uses
   * across 10 pages) and the pale green fill behind a hovered or selected row
   * (28 uses across 7). Naming them changed nothing on screen. */
  --green-deep:   #4a7a50;
  --green-wash:   #f0f5f1;

  /* Icons at rest: a muted green that turns --green-deep on hover. Used for
   * the alert bell, the reveal eye and the setup icons across four files. It
   * is 23 points off the nearest neutral grey, so it is a deliberate tint
   * rather than a stray shade, and folding it into --ink-dim would break the
   * pairing with its own hover colour. */
  --icon-rest:    #b6c1b8;

  /* ---- radius ----
   * Every page's most common radius is already 8px; the pages disagree only in
   * the long tail, where each defines 7 to 16 distinct values. This is the
   * scale to snap those to.
   *   sm  chips, badges, small controls
   *   md  buttons, inputs, table wrappers  (the 8px everything gravitates to)
   *   lg  panels and cards
   */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  999px;

  /* ---- control heights ----
   * Anything that sits in a row with something else takes one of these, so a
   * search box, a dropdown and a filter button line up instead of stepping.
   * Measured on 2026-09-09, the site had six heights in play (30, 33, 34, 36,
   * 38, 41) and /cashback put three of them side by side.
   *   sm    in-row controls, table toolbars, chips
   *   md    the default: searches, dropdowns, filter and sort buttons
   *   lg    primary actions
   *   hero  the page's own search, where it stands alone and is the point of
   *         the page (/research, /dashboard). Kept at the size it already was.
   */
  --control-sm:   30px;
  --control-md:   36px;
  --control-lg:   42px;
  --control-hero: 54px;

  /* ---- spacing ----
   * The page gutter every template already uses is 32px top / 20px sides /
   * 60px bottom. Named so the shell can stop repeating it.
   */
  --gutter-x:     20px;
  --gutter-top:   32px;
  --gutter-bot:   60px;

  /* ---- type ----
   * The body stack is identical on all eight pages; Latine is the wordmark face
   * served from /static/latine.ttf by each page's own @font-face.
   */
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Latine', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --title-size:   24px;
  --title-weight: 700;
}

/* Breakpoints
 * -----------
 * Media queries cannot read custom properties, so these are a convention rather
 * than a token. The audit found six different breakpoint sets across the pages
 * and two pages with none at all. When a page is next touched, move it onto:
 *
 *     900px   desktop  -> narrow desktop   (multi-column layouts collapse)
 *     700px   narrow   -> tablet           (the one value 5 of 8 pages share)
 *     480px   tablet   -> phone            (tables and toolbars go single file)
 */

/* Scrollbar gutter
 * ----------------
 * The shell is a centred max-width column, so its left edge is a function of
 * the *content* width, not the window width. When a vertical scrollbar appears
 * the content area loses ~15px and the whole column re-centres, sliding the nav
 * 8px left. Measured on 2026-09-08: /research at rest sat at left 118, and the
 * moment a search returned results it sat at 110. The nav was 1300px wide in
 * both states; only its position moved, which reads as the bar changing width.
 *
 * Reserving the gutter permanently makes the content width constant, so nothing
 * shifts between a short page and a tall one, or between two pages. This also
 * covers the modal case, where hiding body scroll would otherwise reclaim the
 * gutter and jump the page.
 *
 * gift_cards.html, cashback.html and gcwallet.css each carried their own copy of
 * this before it lived here.
 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }   /* Safari < 18.2 */
}

/* Form controls take the page's typeface
 * -------------------------------------
 * Buttons, selects, inputs and textareas do not inherit font-family, so an
 * unstyled one falls back to the browser's own control font. Measured on
 * 2026-09-09: buttons across the site were rendering in Arial against the
 * page's -apple-system/Segoe UI stack, and /inventory had 9,939 of them
 * against 2 in the right face.
 *
 * The first pass here covered `button` only, on the strength of a sample from
 * one page whose selects and inputs happened to set the face themselves. They
 * do not everywhere: /retiring had 4 selects and 2 inputs in Arial, /gift-cards
 * 1 of each, /gc-wallet 2 inputs. Hence all four elements.
 *
 * A page that wants a different face on a control still sets it and wins. */
button, select, input, textarea { font-family: inherit; }