/*
  BT Clean's OWN tokens. Hand-authored, committed, and not generated from
  anything.

  WHY IT IS IN public/ RATHER THAN app/. The direction called this file
  app/theme.css, where it used to sit, and a bundler-imported stylesheet is the
  ordinary answer. It cannot be one here: /wiki is a @spine/core route handler
  returning a whole HTML document (lib/wiki-chrome.tsx), app/layout.tsx never
  runs there, and core takes head tags as a STRING (lib/site-head.ts) — so a
  file that only the bundler can reach never reaches the wiki, and the bar on
  that page would render with every token unresolved. The alternative is a
  second copy of the palette for the wiki to link, which is the exact defect
  public/brand-roles.css was: two files holding one palette, drifting. So the
  values live once, at a URL, and BOTH worlds link it — the same move
  public/site-bar.css already makes, for the same reason.

  This file used to be stamped out by scripts/app-brand-theme.ts from the
  client's brand package, whose palette was "lifted from the approved pitch
  page": paper, sage, gold, and a Fraunces display serif. That is a PERSUADE
  world — a page built to make somebody want the thing — and this app is an
  OPERATE tool that Brian opens on a phone in a driveway to check the board.
  Dressing the tool in the pitch's clothes is what made the signed-in surface
  read as a brochure with a table in it, and it was rejected outright
  (toth-labs#7197).

  The pitch palette has not moved: it still lives in the brand package at
  content/clients/bt-clean/tokens.default.css and still dresses the pitch. This
  file is the app's, and the two are allowed to differ, because they are doing
  different jobs.

  THE RULES THIS PALETTE HOLDS (impeccable's Operate mode):
    - ONE type family. Inter, loaded by app/layout.tsx through next/font and
      exposed on <html> as --font-inter, which :root reads below. No display
      face, no second family, no serif.
    - A FIXED rem scale. No clamp() anywhere in type: users read this at a
      consistent DPI and a heading that shrinks inside a narrow column looks
      worse, not better.
    - ONE accent, spent on four things only — the current tab, links, the
      primary button, and the focus ring. It is never decoration.
    - A SECOND NEUTRAL for the bar, table heads and panels, so chrome separates
      from content without a border doing the work.
    - Semantic state colours that are TEXT colours: every one below clears
      4.5:1 on the white ground, because each is used as a word next to a dot,
      never as a fill behind text.
*/

:root {
  color-scheme: light;

  /* — type: one family, and the numerals that make a schedule legible — */
  /*
    `var(--font-inter, "Inter")` carries a FALLBACK, and the fallback is the
    whole point. --font-inter is set by next/font on <html> for App Router
    pages; on /wiki nothing sets it, and a bare `var(--font-inter)` there would
    be an invalid substitution that takes the entire --font-ui declaration down
    with it — which is exactly how a font choice once shipped rendering as
    Times for months (tl-keepsake, recorded in design-vetoes.md). With the
    fallback, /wiki resolves to the "Inter" that lib/site-head.ts loads for it.
  */
  --font-ui: var(--font-inter, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — the fixed scale. Seven steps, no clamp, ratio ~1.125–1.2. — */
  --text-xs: 0.75rem;     /* 12px — column heads, the drive-time line */
  --text-sm: 0.8125rem;   /* 13px — board cells, dense rows */
  --text-base: 0.875rem;  /* 14px — body on every data surface */
  --text-md: 1rem;        /* 16px — body on the guide */
  --text-lg: 1.125rem;    /* 18px — the wordmark, guide h3 */
  --text-xl: 1.25rem;     /* 20px — page titles */
  --text-2xl: 1.5rem;     /* 24px — the guide's h1 and the auth wall's */

  /* — neutrals — */
  --ground: #ffffff;      /* the page */
  --neutral: #f5f6f7;     /* the bar, table heads, panels: the second layer */
  --neutral-deep: #eceef0; /* a pressed control, a hovered row */
  --ink: #111827;         /* everything a person reads */
  /*
    Muted is #636c79, not the #6b7280 the direction named. #6b7280 measures
    4.47:1 on --neutral, and muted text's most common home is the BAR, whose
    ground is exactly that: the signed-in address would have shipped under AA
    in the one place it always appears. #636c79 measures 5.31:1 on --ground and
    4.91:1 on --neutral, so it clears on both surfaces it is used on.
  */
  --muted: #636c79;       /* the second line of a stop, addresses, meta */
  --hair: #e5e7eb;        /* 1px rules between rows and sections */
  --rule: #d1d5db;        /* the stronger rule under a table head */

  /* — the one accent — */
  --accent: #1d5fd6;
  --accent-hover: #174ba9;
  --accent-soft: #eaf0fc;  /* the selected row's ground, and nothing else */

  /*
    — state, as TEXT —
    Each of these is set against --ground with a dot of the same colour beside
    it. Measured on white: locked 5.02:1, draft 5.02:1, cancelled
    6.47:1, and on --neutral 4.64 / 4.64 / 5.98 — every one clears AA for body
    text on both grounds, which is the bar, because each one IS body text.
  */
  --state-locked: #15803d;
  --state-draft: #b45309;
  --state-off: #b91c1c;
  --state-none: var(--muted);

  /* — space: a 4px rhythm, and nothing between the steps — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* — shape. One radius for controls; the tile's 22% belongs to the icon. — */
  --radius: 6px;

  /* — measures — */
  --measure-read: 68ch;   /* the guide's prose */
  --measure-sheet: 56rem; /* the overview */
  --measure-board: 88rem; /* the week board, which wants the width */

  /* — the bar — */
  --bar-height: 48px;
}

/*
  The browser's own surfaces, themed from the palette above rather than left on
  the defaults that belong to no design system: the selection, the caret, and
  the numerals in every column of times and counts.
*/
::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:root {
  caret-color: var(--accent);
  accent-color: var(--accent);
}