/* Any Given - the token system.
 *
 * Lifted from sports-live/docs/design/DESIGN.md, which lifted every value from a
 * running program rather than inventing one. Where that document and any brief
 * disagree ABOUT A TOKEN, DESIGN.md wins.
 *
 * Two things in here fail a component silently, so read them before using it:
 *
 *  1. THE ACCENT SWAPS TOKEN, not just value. Maroon carries the accent in light,
 *     gold on dark. A component hard-coded to --maroon is invisible on dark and
 *     NOTHING WARNS YOU. Read --accent. Always.
 *
 *  2. TEAM COLOR IS DATA AND IT OUTRANKS EVERY TOKEN HERE. The defaults are
 *     Arizona State because the app was built in Tempe. They are placeholders with
 *     a home town, not brand colors. Nothing may depend on maroon being maroon.
 */

:root {
  /* Defaults only. On the LIVE BOARD the team you pick overwrites these at :root,
   * because there is genuinely one team. IN THE POOL THAT IS FORBIDDEN - a slate
   * is 131 games and ~260 teams on one scroll, and a root overwrite cannot express
   * it. The pool uses --team-a / --team-b, set per element. See team-chip.js. */
  --maroon: #8C1D40;
  --gold:   #FFC627;

  --bg:     #faf7f5;   /* warm off-white, never pure white - that is what cards are for */
  --card:   #ffffff;   /* the only pure white in the system */
  --fg:     #1a1416;
  --dim:    #6f6165;
  --line:   #e6ddd8;   /* DEPTH IS THIS. 1px. There are no shadows in this system */
  --track:  #e6ddd8;
  --grass:  #d8e2d6;   /* the drive chart ground. The one literal color */

  /* FIXED SCALES. Never team color, in either theme. */
  --up:   #1f7a4d;
  --down: #c0392b;

  /* The indirection every component reads. */
  --accent: var(--maroon);

  /* Confidence - three steps, fixed, both themes. The model is allowed to say it
   * is guessing and --c-lo is a feature. Never interpolate a continuous ramp:
   * three steps are readable at 11px and a gradient is not. */
  --c-hi-bg: #d7f0e0;  --c-hi-fg: #186b3c;
  --c-mid-bg:#fdefd0;  --c-mid-fg:#8a5b09;
  --c-lo-bg: #fbdcd9;  --c-lo-fg: #96261c;

  /* A team with no usable primary. MEASURED, not assumed: of 760 schools in
   * fixtures/teams.json, 331 have primary '000000' and 70 have none at all - 401
   * with no usable primary, and 393 with NO SECONDARY AT ALL. That is more than
   * half the file. A null is a DEFINED STATE, never whatever #000000 does. */
  --team-null:      #8a8a8a;
  --team-null-line: #b4b4b4;

  --radius-chip:   5px;
  --radius-button: 9px;   /* the dominant radius */
  --radius-card:  12px;
  --radius-pill:  22px;
  --tap-min:      44px;   /* one-handed, at night, possibly on a moving couch */

  --font: ui-sans-serif, system-ui, sans-serif;

  /* The type scale, as measured in the reference implementation. */
  --t-micro:  11px;   /* chips, axis labels, units */
  --t-body:   13px;   /* THE WORKHORSE. The most common size in the interface */
  --t-emph:   15px;
  --t-section:17px;
  --t-figure: 21px;
  --t-score:  24px;
  --t-bank:   30px;   /* THE LARGEST TYPE IN THE APP - live layer only.
                       * The pool has no bank strip and no 30px figure. Its own
                       * headline figure is deliberately unassigned: do not
                       * inherit this to fill the hole. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:    #120a0e;   /* near-black with the maroon cast held */
    --card:  #1c1216;
    --fg:    #f5eef0;
    --dim:   #a8969c;
    --line:  #33232a;
    --track: #3a2a30;
    --grass: #14361f;
    --accent: var(--gold);          /* THE TOKEN SWAPS. Maroon is not legible here */
    --up:   #3fcf7a;                /* the light values go muddy on #120a0e */
    --down: #ff6b5e;
    --c-hi-bg: #123726;  --c-hi-fg: #68e6a0;
    --c-mid-bg:#3a2f12;  --c-mid-fg:#f2c65a;
    --c-lo-bg: #3d1a17;  --c-lo-fg: #ff8b80;
    --team-null:      #7d7d7d;
    --team-null-line: #4a4a4a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:    #120a0e;
  --card:  #1c1216;
  --fg:    #f5eef0;
  --dim:   #a8969c;
  --line:  #33232a;
  --track: #3a2a30;
  --grass: #14361f;
  --accent: var(--gold);
  --up:   #3fcf7a;
  --down: #ff6b5e;
  --c-hi-bg: #123726;  --c-hi-fg: #68e6a0;
  --c-mid-bg:#3a2f12;  --c-mid-fg:#f2c65a;
  --c-lo-bg: #3d1a17;  --c-lo-fg: #ff8b80;
  --team-null:      #7d7d7d;
  --team-null-line: #4a4a4a;
  color-scheme: dark;
}

/* ---- the floor every screen inherits ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
}

/* EVERY NUMBER IS TABULAR, no exceptions. A figure that reflows as it ticks is a
 * figure nobody trusts - and four of this app's five animated moments are a number
 * changing under time pressure. */
.num, table, input[type="number"] { font-variant-numeric: tabular-nums; }

/* Depth is a hairline. If you are reaching for a shadow, the answer is this. */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

button, .btn {
  min-height: var(--tap-min);
  border-radius: var(--radius-button);
  font: inherit;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.c-hi { background: var(--c-hi-bg);  color: var(--c-hi-fg); }
.c-mid{ background: var(--c-mid-bg); color: var(--c-mid-fg); }
.c-lo { background: var(--c-lo-bg);  color: var(--c-lo-fg); }
.c-hi, .c-mid, .c-lo {
  font-size: var(--t-micro); border-radius: var(--radius-chip);
  padding: 2px 6px; display: inline-block;
}

.up   { color: var(--up); }
.down { color: var(--down); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}