/* Sports Lab design tokens.
 *
 * Drop this in ahead of app.css. It keeps every variable the dashboard
 * already uses at its exact current value -- --bg, --card, --ink, --dim,
 * --line, --good, --bad, --warn -- and adds the brand layer on top, so
 * nothing that ships today changes appearance.
 *
 * --accent is the one existing variable that is REDEFINED: #2f5fa8 was a
 * desaturated navy, and the brand hue is now Tesla's button blue #3e6ae1. If
 * you want the old accent back, delete the --accent lines and app.css wins.
 *
 * WARNING: THE MARK CONTAINS BOTH STATE COLOURS. --cc-red #b22125 measures
 * 1.00:1 against --bad #a8312a, and --grass #2f7d46 measures 1.05:1 against
 * --good #1f7a4d. In each case, the same colour. Nothing here changes --good
 * or --bad, because they already ship. But it means the logo wears both the
 * winning green and the losing red, so the mark's colours stay inside the
 * mark, and every state in the UI is carried by a WORD with colour second.
 *
 * Both themes are defined at the token level. Never write a colour literal
 * into a component; a colour that exists in only one theme is the classic
 * unreadable-in-dark-mode bug.
 */

:root {
  color-scheme: light;

  /* --- surfaces and text: unchanged from app.css ---------------------- */
  --bg:     #fbfbfa;   /* page ground               (token: paper)        */
  --card:   #ffffff;   /* every card and panel      (token: card)         */
  --ink:    #1a1a18;   /* primary text              (token: ink)          */
  --dim:    #6b6b66;   /* timestamps, books, notes  (token: dim)          */
  --line:   #e6e4df;   /* hairlines                 (token: rule)         */

  /* --- state: unchanged. Always paired with a word, never colour alone. */
  --good:   #1f7a4d;   /* a pick that covered       (token: cover)        */
  --bad:    #a8312a;   /* a pick that missed        (token: miss)         */
  --warn:   #8a6d1f;   /* a reading past its window (token: stale)        */

  /* --- the brand layer ------------------------------------------------ */
  /* The model's number, the primary action, the focus ring. Nothing else.
     Three --accent elements on one screen is two too many. */
  --accent:   #1b3bff;
  --edge:     #1b3bff;
  --on-edge:  #ffffff;  /* text on an --edge fill; flips in dark          */
  --mark-quiet: #1a1a18;/* the mark's upper slab ON PAGE; follows theme   */

  /* The app icon does NOT follow the OS theme, so nothing drawn on --field
     may either. These three are deliberately identical in both blocks
     below. Using --mark-quiet on --field puts near-black on near-black in
     the light theme, at 1.1:1, and the market's slab vanishes. */
  --field:     #0e1116;
  --icon-ink:  #c8cbd2;  /* 11.6:1 on --field */
  --icon-edge: #8aa2ff;  /*  7.8:1 on --field */

  /* --- type ------------------------------------------------------------
     Text is Archivo. Every NUMBER is IBM Plex Mono with tabular figures,
     because every number in this product is a measurement. There is no
     third case. */
  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
               monospace;

  /* --- scale ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* card padding, and the minimum side gutter */
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
}

/* 2026-10-16 REDESIGN: DARK IS THE DEFAULT, whatever the device says.
   The high-contrast board (deeper charcoal, one neon accent) is the product's
   look now, so it no longer waits for the OS to ask for it. The light theme
   above is still complete and still the token source; it applies only when
   something sets data-theme="light" on <html>.
   Previous values (device-following dark): _backup\design-20261016\wwwroot\brand.css */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:     #0f0f12;   /* deeper than the system's #16161a                */
  --card:   #18181d;   /* one step up from the page                       */
  --ink:    #eceaf0;
  --dim:    #9a97a3;   /* 6.6:1 on --card                                 */
  --line:   #2a2a32;
  --good:   #4ec38a;
  --bad:    #e0716a;
  --warn:   #d8b45c;
  /* The neon accent. Same three jobs as before and no others: the model's
     number, the primary action, the focus ring. 10.4:1 on --card. */
  --accent: #38d4ff;
  --edge:   #38d4ff;
  --on-edge: #0b1024;
  --mark-quiet: #eceaf0;
}

/* Every figure on every surface. Without tabular-nums a column of prices
   sits a little differently on each row, which reads as carelessness long
   before anyone works out why. */
.fig, .num, [data-figure] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* One visible focus state, 3:1 on every surface it can land on. */
:focus-visible {
  outline: 2px solid var(--edge);
  outline-offset: 2px;
}