/* 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;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:     #16161a;
    --card:   #1e1e24;
    --ink:    #eceaf0;
    --dim:    #9a97a3;
    --line:   #2e2e37;
    --good:   #4ec38a;
    --bad:    #e0716a;
    --warn:   #d8b45c;
    /* Lifted against the dark CARD (#1e1e24), not the dark page. Cards sit
       one step lighter, and variants tuned to the page land at 4.15 on a
       card -- passing the check that was run and failing the surface they
       are used on. */
    /* --edge lifted to read on a dark screen. This is NOT the paint colour
       and cannot be: #123a81 is 1.7:1 on a dark page. A metallic finish is
       made to be seen in sunlight with flake doing half the work. */
    --accent: #4c84e6;
    --edge:   #4c84e6;
    --on-edge: #0b1024;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:     #16161a;
  --card:   #1e1e24;
  --ink:    #eceaf0;
  --dim:    #9a97a3;
  --line:   #2e2e37;
  --good:   #4ec38a;
  --bad:    #e0716a;
  --warn:   #d8b45c;
  --accent: #4c84e6;
  --edge:   #4c84e6;
  --on-edge: #0b1024;
}

/* 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;
}