/* Crushed Courts design tokens.
 *
 * Every colour, size and duration in the product is defined here and nowhere
 * else. There are no per-theme class overrides anywhere in this codebase: a
 * second theme is a second :root block redefining these values, not a parallel
 * set of selectors. That is the entire reason for doing it this way, and it is
 * what makes "change the accent colour" a one-line edit rather than a sweep.
 *
 * One polished dark theme in v1.
 */

:root {
  /* ---- Surfaces ---------------------------------------------------------
   * Four steps, not two. A dense table needs a distinct raised surface for the
   * sticky header and a distinct hover state, or rows blur together.
   */
  --bg: #0B0D10;          /* page, near-black charcoal */
  --panel: #12151A;       /* cards, table body */
  --panel-2: #171B22;     /* raised: sticky headers, filter bar, popovers */
  --panel-3: #1C212A;     /* row hover, pressed */
  --line: #1E232B;        /* default border */
  --line-2: #2A313C;      /* emphasised border, column rules */

  /* ---- Text ------------------------------------------------------------- */
  --ink: #EAEEF3;         /* primary */
  --ink-2: #A3AFBD;       /* secondary */
  /* LIGHTENED, 2026-10-24, because they were not readable rather than
   * because they looked wrong. Paul on a phone: "some of the font like the
   * sub text is just too hard to read, its super light font, i can't read
   * it."
   *
   * Measured against the three surfaces they sit on, as a contrast ratio.
   * WCAG wants 4.5 for body text and 3.0 for large or bold:
   *
   *                   bg    panel   panel-2
   *     --dim        4.62    4.35     4.10     was borderline, failed on cards
   *     --faint      2.37    2.23     2.10     less than half of what is needed
   *
   * --faint at 2.10 was not dim, it was invisible, and it carries card notes,
   * "pays less", and most of the micro text on the player page. Both are now
   * set so the WORST of the three surfaces clears 4.5: the darkest background
   * is not the one to design against when the text mostly sits on panels.
   *
   * Same hue, lifted in lightness, so nothing about the palette changes
   * except that you can read it.
   */
  --dim: #768494;         /* labels, metadata        -- 4.52 on panel-2 */
  --faint: #71859C;       /* empty state, "no line"  -- 4.55 on panel-2 */

  /* ---- Brand ------------------------------------------------------------ */
  --accent: #FF6B1A;      /* crush orange: primary action, active tab, focus */
  --accent-hover: #FF8440;
  --accent-deep: #C9410A;  /* gradient partner for the brand mark */
  --accent-ink: #0B0D10;  /* text ON an accent fill -- dark, for contrast */
  --accent-weak: #2A1710; /* tinted background for active/selected rows */

  /* ---- Nav inks ---------------------------------------------------------
   *
   * One colour per destination, the way Crushed Yards does it. The point is
   * not decoration: eight items all in the same dim grey read as texture
   * rather than as eight different places, which is exactly how ours looked.
   * A colour per item makes the strip scannable by hue before you read a
   * word.
   *
   * NONE of these is orange. --accent means "the thing you are on" in every
   * other part of this product, and a permanently orange tab that is not the
   * active one would be a lie told in the most prominent place on the page.
   *
   * Chosen apart in hue rather than in lightness, because roughly one man in
   * twelve cannot separate red from green. */
  --ink-props: #5BA8FF;        /* blue   -- the main board */
  --ink-trend: #19E3B1;        /* teal   -- shares the "over" green */
  --ink-players: #B98BFF;      /* violet */
  --ink-depth: #F5B83D;        /* amber  */
  --ink-value: #4DD9FF;        /* cyan   */
  --ink-opportunity: #7BD98A;  /* soft green */
  --ink-sim: #FF7AB6;          /* pink   */
  --ink-model: #8FA6BD;        /* steel  -- the record, deliberately quiet */

  /* ---- Signal ----------------------------------------------------------- */
  --over: #19E3B1;        /* over, hit, good */
  --under: #FF4D5E;       /* under, miss, bad */
  --neutral: #F5B83D;     /* neutral, caution */
  --info: #5BA8FF;        /* informational, links in prose */

  /* ---- Hit-rate heatmap -------------------------------------------------
   * Teal through amber to coral. Five stops, with lightness falling across the
   * ramp as well as hue shifting, so it stays readable for the ~8% of men with
   * red-green colour deficiency -- and so 75% is actually distinguishable from
   * 100% rather than both reading as "green".
   */
  --heat-5: #19E3B1;
  --heat-4: #7BD98A;
  --heat-3: #F5B83D;
  --heat-2: #FF8F4D;
  --heat-1: #FF4D5E;
  /* Cell background is a tint of the text colour at this strength. Kept low so
   * the number stays the brightest thing in the cell. */
  --heat-tint: 0.16;

  /* ---- Modifier pills ---------------------------------------------------
   * Goblin green and demon red are PrizePicks' own vocabulary, and the spec
   * asks for them directly. They sit close to --over/--under on purpose: a
   * goblin IS the easier side.
   */
  --goblin: #19E3B1;
  --demon: #FF4D5E;
  --fixed: #8FA6BD;
  --alt: var(--dim);

  /* ---- Type -------------------------------------------------------------
   * Three faces, each doing one job.
   *
   * Display is Barlow Condensed, set in caps: it reads like a broadcast
   * lower-third or a printed box score, which is the right register for a
   * stats product and nothing like a generated dashboard.
   *
   * UI is Archivo -- a grotesk with more weight and personality than Inter.
   * Inter is deliberately avoided: it is the default of essentially every
   * generated interface, so it reads as generated whatever else is done to it.
   *
   * Numbers are IBM Plex Mono. The mono face is why a stats table reads as
   * precise rather than approximate.
   */
  --font-display: "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --font: "Archivo", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Display type is condensed, so it carries tighter tracking at size. */
  --track-display: 0.005em;

  --fs-micro: 10px;       /* sub-labels under a figure */
  --fs-lab: 11px;         /* uppercase tracked column labels */
  --fs-sm: 13px;          /* table cells -- the spec's compact table text */
  --fs-body: 14px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-h1: 28px;
  --fs-fig: 40px;         /* the one big number on a detail page */

  --track-lab: 0.08em;    /* letter-spacing for uppercase labels */

  /* ---- Space ------------------------------------------------------------ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 30px;
  --s7: 44px;

  /* ---- Shape ------------------------------------------------------------ */
  --r-card: 10px;
  --r-chip: 6px;
  --r-pill: 999px;
  --row-h: 52px;          /* board row: dense, still tappable */
  --row-h-compact: 42px;  /* density toggle */
  --nav-w: 232px;
  --rail-w: 340px;        /* detail page right rail */
  --nav-w-collapsed: 60px;
  --topbar-h: 56px;

  /* Soft inner glow on hover rather than heavy drop shadows. */
  --glow: inset 0 0 0 1px var(--line-2);
  --glow-accent: inset 0 0 0 1px var(--accent);
  --shadow-pop: 0 8px 28px rgb(0 0 0 / 0.55);
  --scrim: rgb(0 0 0 / 0.6);       /* modal backdrop */

  /* Set at runtime, declared here so every value in the product has one home.
   * --team is the player's team colour, written per row from data.
   * --toolbar-h is measured from the sticky toolbar, which wraps at narrow
   * widths, so a hardcoded offset would park the table header over the rows. */
  --team: var(--line-2);
  --toolbar-h: 60px;

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Honour a reduced-motion preference: no count-ups, no pulses, no transitions. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}