/* BetReady design tokens.
   Art direction: native iOS. System font (SF Pro on Apple devices), frosted glass over a soft colour wash,
   large continuous corners, pills, hairline separators instead of boxes. Ink for primary actions,
   lime as the brand highlight. Change the look of the whole app from here. */

:root {
  /* type: the platform's own UI font, so it feels native on every device */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* fixed brand colours */
  --slip-ink: #111113;
  --lime: #d7ff3c;

  /* light */
  --bg: #f2f2f7; --bg-2: rgba(118, 118, 128, .12); --panel: rgba(255, 255, 255, .78); --panel-2: rgba(118, 118, 128, .08);
  --ink: #1c1c1e; --ink-2: #3a3a3c; --muted: #8a8a8e; --line: rgba(60, 60, 67, .12); --line-2: rgba(60, 60, 67, .2);
  --brand: #1c1c1e; --brand-2: #1c1c1e; --brand-ink: #ffffff;           /* primary actions: ink pill */
  --brand-soft: rgba(203, 245, 40, .38); --brand-soft-ink: #2f4200;     /* highlights: lime tint */
  --accent-text: #5b7d00;
  --logo-green: #00b386;  /* the logo arrow's #09dda4, deepened to stay readable on light backgrounds */
  --home: #0a7aff; --draw: #aeaeb2; --away: #ff6a2b;
  --warn: #b25e00; --warn-soft: rgba(255, 159, 10, .14); --bad: #ff3b30; --bad-soft: rgba(255, 59, 48, .12);
  --info: #0a7aff; --info-soft: rgba(10, 122, 255, .09);
  --glass: rgba(255, 255, 255, .62); --glass-edge: rgba(255, 255, 255, .75);
  --blur: saturate(180%) blur(22px);
  --shadow: 0 1px 2px rgba(20, 20, 40, .04), 0 8px 28px rgba(20, 20, 40, .06);
  --shadow-lg: 0 30px 80px rgba(20, 20, 40, .22);
  --wash-1: rgba(9, 221, 164, .3); --wash-2: rgba(90, 150, 255, .22); --wash-3: rgba(255, 150, 100, .2);
  --r: 20px; --r-sm: 13px;
}

/* dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-2: rgba(118, 118, 128, .24); --panel: rgba(28, 28, 30, .78); --panel-2: rgba(118, 118, 128, .16);
    --ink: #ffffff; --ink-2: rgba(235, 235, 245, .82); --muted: rgba(235, 235, 245, .52); --line: rgba(84, 84, 88, .34); --line-2: rgba(84, 84, 88, .55);
    --brand: #d7ff3c; --brand-2: #d7ff3c; --brand-ink: #111113;
    --brand-soft: rgba(215, 255, 60, .16); --brand-soft-ink: #d7ff3c;
    --accent-text: #d7ff3c;
    --logo-green: #09dda4;
    --home: #409cff; --draw: #636366; --away: #ff8a50;
    --warn: #ffb340; --warn-soft: rgba(255, 159, 10, .16); --bad: #ff6961; --bad-soft: rgba(255, 69, 58, .16);
    --info: #64a8ff; --info-soft: rgba(10, 132, 255, .16);
    --glass: rgba(30, 30, 32, .55); --glass-edge: rgba(255, 255, 255, .08);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .7);
    --wash-1: rgba(9, 221, 164, .16); --wash-2: rgba(64, 120, 255, .2); --wash-3: rgba(255, 110, 60, .12);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-2: rgba(118, 118, 128, .24); --panel: rgba(28, 28, 30, .78); --panel-2: rgba(118, 118, 128, .16);
  --ink: #ffffff; --ink-2: rgba(235, 235, 245, .82); --muted: rgba(235, 235, 245, .52); --line: rgba(84, 84, 88, .34); --line-2: rgba(84, 84, 88, .55);
  --brand: #d7ff3c; --brand-2: #d7ff3c; --brand-ink: #111113;
  --brand-soft: rgba(215, 255, 60, .16); --brand-soft-ink: #d7ff3c;
  --accent-text: #d7ff3c;
  --logo-green: #09dda4;
  --home: #409cff; --draw: #636366; --away: #ff8a50;
  --warn: #ffb340; --warn-soft: rgba(255, 159, 10, .16); --bad: #ff6961; --bad-soft: rgba(255, 69, 58, .16);
  --info: #64a8ff; --info-soft: rgba(10, 132, 255, .16);
  --glass: rgba(30, 30, 32, .55); --glass-edge: rgba(255, 255, 255, .08);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .7);
  --wash-1: rgba(9, 221, 164, .16); --wash-2: rgba(64, 120, 255, .2); --wash-3: rgba(255, 110, 60, .12);
}

/* base */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font-body); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
/* soft colour wash behind everything, so the frosted glass has something to blur */
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(49% 42% at 12% 8%, var(--wash-1), transparent 70%),
              radial-gradient(42% 36% at 92% 18%, var(--wash-2), transparent 70%),
              radial-gradient(50% 40% at 55% 105%, var(--wash-3), transparent 70%); }
button { font: inherit; color: inherit; letter-spacing: inherit; }
.num { font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ph, .ph-fill { line-height: 1; }
/* frosted glass material */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }