/* BetVault design tokens. Dark (pure black, the default) on :root; light overrides on [data-theme="light"]
   (opt-in via the `theme` cookie, set server-side on <html>). 4/8 spacing grid. */
@font-face{font-family:"Inter";src:url("fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  /* brand */
  --purple:#8C52FF; --purple-400:#A27BFF; --purple-300:#BFA3FF; --purple-900:#1E1338;
  --lime:#C1FF72; --lime-600:#9BD94A;
  /* surfaces */
  --bg:#000000; --bg-2:#0A0A0A; --surface:#0A0A0A; --surface-2:#141414;
  --surface-solid:#111111; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.15);
  /* text (all >= 4.5:1 on --bg) */
  --text:#F5F5F7; --text-2:#C2C2CF; --muted:#9494A6;
  /* status */
  --pos:#C1FF72; --neg:#FF6B81; --warn:#FFC266; --info:#8FB8FF;
  /* type */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.5rem; --fs-2xl:2rem; --fs-hero:clamp(2.5rem,6vw,4.5rem);
  /* spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* radii, shadows, motion */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(140,82,255,.35), 0 12px 48px rgba(140,82,255,.25);
  --ring:0 0 0 2px var(--bg), 0 0 0 4px var(--purple-400);
  --ease:cubic-bezier(.2,.7,.2,1); --t:160ms;
  /* theme-dependent component colours */
  --lime-text:#C1FF72; --link-hover:#fff; --active-text:#fff; --drop:rgba(0,0,0,.5);
  --body-glow:none;
  --nav-bg:rgba(0,0,0,.86); --side-bg:#000000;
  --card-bg:#0A0A0A;
  --auth-bg:#0A0A0A;
  --th-bg:rgba(255,255,255,.03); --row-line:rgba(255,255,255,.05); --row-hover:rgba(255,255,255,.025);
  --input-bg:rgba(0,0,0,.35); --input-hover:rgba(255,255,255,.24); --warn-text:#FFD1D8;
  --eyebrow-line:rgba(193,255,114,.3); --eyebrow-bg:rgba(193,255,114,.06);
  --hero-grad:linear-gradient(180deg,#fff 20%,#C9B5FF 70%,#A27BFF); --hero-em:linear-gradient(90deg,#C1FF72,#E6FFB8);
  --mock-shadow:0 0 0 1px rgba(140,82,255,.25),0 40px 120px -20px rgba(140,82,255,.45),0 30px 60px rgba(0,0,0,.6);
  --green-soft:rgba(193,255,114,.10); --grid:rgba(255,255,255,.06); --chart-end:#C1FF72; --toast-bg:rgba(17,17,17,.92);
  --nav-h:60px; --side-w:248px; --maxw:1200px;
}

/* Light theme (default). Lime is only used as a fill/accent; lime *text* uses a dark olive for contrast. */
[data-theme="light"]{
  color-scheme:light;
  --purple-300:#6D35E8; --purple-400:#8C52FF; --purple-900:#EFE8FF;
  --bg:#F7F7FA; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F0F6; --surface-solid:#FFFFFF;
  --border:rgba(20,16,40,.09); --border-strong:rgba(20,16,40,.16);
  --text:#14121F; --text-2:#45425A; --muted:#6B6880;
  --pos:#2F8A12; --neg:#D12E4B; --warn:#A86200; --info:#2F64D6;
  --lime-text:#2F8A12; --green-soft:rgba(111,191,31,.14); --link-hover:#14121F; --active-text:#14121F; --drop:rgba(20,16,40,.12);
  --shadow:0 1px 2px rgba(20,16,40,.05), 0 8px 24px rgba(20,16,40,.06);
  --glow:0 0 0 1px rgba(140,82,255,.22), 0 16px 48px rgba(140,82,255,.14);
  --body-glow:radial-gradient(1200px 600px at 80% -10%,rgba(140,82,255,.10),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(193,255,114,.16),transparent 60%);
  --nav-bg:rgba(255,255,255,.78); --side-bg:#FFFFFF;
  --card-bg:#FFFFFF; --auth-bg:#FFFFFF;
  --th-bg:#F7F6FB; --row-line:rgba(20,16,40,.06); --row-hover:#FAF8FF;
  --input-bg:#FFFFFF; --input-hover:rgba(20,16,40,.28); --warn-text:#8A1C30;
  --eyebrow-line:rgba(63,125,11,.28); --eyebrow-bg:rgba(193,255,114,.35);
  --hero-grad:linear-gradient(180deg,#14121F 30%,#4B2AA8 75%,#8C52FF); --hero-em:linear-gradient(90deg,#8C52FF,#6D35E8);
  --mock-shadow:0 0 0 1px rgba(140,82,255,.18),0 40px 100px -20px rgba(140,82,255,.30),0 24px 48px rgba(20,16,40,.12);
  --grid:rgba(20,16,40,.07); --chart-end:#6FBF1F; --toast-bg:rgba(255,255,255,.92);
}