/* VoltixBet – Slate/Cyan design token layer (v2) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Syne:wght@700;800&display=swap');

:root {
  /* ── Backgrounds ─────────────────────────────────── */
  --pb-bg-0: #080A12;
  --pb-bg-1: #0B0E14;
  --pb-bg-2: #101521;
  --pb-bg-3: #171D2B;
  --pb-bg-4: #222A3B;
  --pb-bg-inset: #05070D;
  --pb-bg-overlay: rgba(5,7,13,0.78);

  /* ── Borders / Lines ────────────────────────────── */
  --pb-line: #252B3A;
  --pb-line-strong: #3A4357;
  --pb-line-soft: rgba(255,255,255,0.05);
  --pb-line-hair: rgba(255,255,255,0.03);

  /* ── Text ───────────────────────────────────────── */
  --pb-ink-1: #F4F5F8;
  --pb-ink-2: #A7AEC2;
  --pb-ink-3: #7A849C;
  --pb-ink-mute: #4B556B;
  --pb-ink-on-accent: #0B0E14;

  /* ── Accent (VoltixBet lime) ─────────────────────── */
  --pb-accent: #D7FF3A;
  --pb-accent-hot: #E8FF6B;
  --pb-accent-deep: #A8D600;
  --pb-accent-soft: rgba(215,255,58,0.13);
  --pb-accent-glow: rgba(215,255,58,0.32);

  /* ── Semantic ───────────────────────────────────── */
  --pb-up: #29D68A;
  --pb-up-soft: rgba(41,214,138,0.13);
  --pb-down: #F05070;
  --pb-down-soft: rgba(240,80,112,0.13);
  --pb-warn: #F5A623;
  --pb-warn-soft: rgba(245,166,35,0.13);
  --pb-live: #F04060;
  --pb-live-soft: rgba(240,64,96,0.13);
  --pb-lock: #3A5060;

  /* ── Typography ─────────────────────────────────── */
  --pb-font-display: 'Syne', 'Helvetica Neue', sans-serif;
  --pb-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pb-font-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  /* ── Type scale ─────────────────────────────────── */
  --pb-t-2xs: 10px;  --pb-t-xs: 11px;  --pb-t-sm: 13px;
  --pb-t-base: 14px; --pb-t-md: 15px;  --pb-t-lg: 17px;
  --pb-t-xl: 20px;   --pb-t-2xl: 26px; --pb-t-3xl: 34px;
  --pb-t-4xl: 48px;  --pb-t-5xl: 66px; --pb-t-6xl: 100px;

  /* ── Line-heights ───────────────────────────────── */
  --pb-lh-tight: 1.05; --pb-lh-snug: 1.2;
  --pb-lh-base: 1.44;  --pb-lh-loose: 1.65;

  /* ── Letter-spacing ─────────────────────────────── */
  --pb-tr-tight: -0.02em; --pb-tr-snug: -0.01em;
  --pb-tr-wide: 0.04em;   --pb-tr-wider: 0.08em;
  --pb-tr-widest: 0.13em;

  /* ── Spacing ────────────────────────────────────── */
  --pb-s-0:0; --pb-s-1:4px; --pb-s-2:8px; --pb-s-3:12px;
  --pb-s-4:16px; --pb-s-5:20px; --pb-s-6:24px; --pb-s-7:28px;
  --pb-s-8:32px; --pb-s-10:40px; --pb-s-12:48px;
  --pb-s-14:56px; --pb-s-16:64px; --pb-s-20:80px;
  --pb-s-24:96px; --pb-s-32:128px;

  /* ── Radii ──────────────────────────────────────── */
  --pb-r-xs:2px; --pb-r-sm:4px; --pb-r-md:8px;
  --pb-r-lg:14px; --pb-r-xl:20px; --pb-r-2xl:28px; --pb-r-pill:999px;

  /* ── Shadows ────────────────────────────────────── */
  --pb-sh-flat: inset 0 0 0 1px rgba(255,255,255,0.04);
  --pb-sh-sheet: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.50);
  --pb-sh-raised: 0 16px 40px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.35);
  --pb-sh-glow: 0 0 0 1px rgba(215,255,58,0.35), 0 8px 28px rgba(215,255,58,0.14);
  --pb-sh-focus: 0 0 0 2px var(--pb-bg-0), 0 0 0 4px var(--pb-accent);

  /* ── Motion ─────────────────────────────────────── */
  --pb-ease-std: cubic-bezier(0.2,0.8,0.2,1);
  --pb-ease-decel: cubic-bezier(0,0,0.2,1);
  --pb-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --pb-d-fast:140ms; --pb-d-base:210ms; --pb-d-slow:370ms;

  /* ── Layout ─────────────────────────────────────── */
  --pb-grid-max: 1440px;
  --pb-gutter: 24px;
  --pb-rail-w: 360px;
  --pb-side-w: 240px;
  --pb-hdr-h: 64px;

  /* ── z-index ────────────────────────────────────── */
  --pb-z-base:1; --pb-z-rail:30; --pb-z-sticky:40;
  --pb-z-drawer:60; --pb-z-toast:80; --pb-z-modal:90;

  /* Aliases so existing CSS vars still resolve */
  --bg-0:var(--pb-bg-0); --bg-1:var(--pb-bg-1); --bg-2:var(--pb-bg-2);
  --bg-3:var(--pb-bg-3); --bg-4:var(--pb-bg-4); --bg-inset:var(--pb-bg-inset);
  --bg-overlay:var(--pb-bg-overlay);
  --line:var(--pb-line); --line-strong:var(--pb-line-strong);
  --line-soft:var(--pb-line-soft); --line-hairline:var(--pb-line-hair);
  --ink-1:var(--pb-ink-1); --ink-2:var(--pb-ink-2); --ink-3:var(--pb-ink-3);
  --ink-mute:var(--pb-ink-mute); --ink-on-accent:var(--pb-ink-on-accent);
  --accent:var(--pb-accent); --accent-hot:var(--pb-accent-hot);
  --accent-deep:var(--pb-accent-deep); --accent-soft:var(--pb-accent-soft);
  --accent-glow:var(--pb-accent-glow);
  --up:var(--pb-up); --up-soft:var(--pb-up-soft);
  --down:var(--pb-down); --down-soft:var(--pb-down-soft);
  --warn:var(--pb-warn); --warn-soft:var(--pb-warn-soft);
  --live:var(--pb-live); --live-soft:var(--pb-live-soft);
  --lock:var(--pb-lock);
  --font-display:var(--pb-font-display); --font-body:var(--pb-font-body); --font-mono:var(--pb-font-mono);
  --t-2xs:var(--pb-t-2xs); --t-xs:var(--pb-t-xs); --t-sm:var(--pb-t-sm);
  --t-base:var(--pb-t-base); --t-md:var(--pb-t-md); --t-lg:var(--pb-t-lg);
  --t-xl:var(--pb-t-xl); --t-2xl:var(--pb-t-2xl); --t-3xl:var(--pb-t-3xl);
  --t-4xl:var(--pb-t-4xl); --t-5xl:var(--pb-t-5xl); --t-6xl:var(--pb-t-6xl);
  --lh-tight:var(--pb-lh-tight); --lh-snug:var(--pb-lh-snug);
  --lh-base:var(--pb-lh-base); --lh-loose:var(--pb-lh-loose);
  --tr-tight:var(--pb-tr-tight); --tr-snug:var(--pb-tr-snug);
  --tr-wide:var(--pb-tr-wide); --tr-wider:var(--pb-tr-wider); --tr-widest:var(--pb-tr-widest);
  --s-0:0; --s-1:var(--pb-s-1); --s-2:var(--pb-s-2); --s-3:var(--pb-s-3);
  --s-4:var(--pb-s-4); --s-5:var(--pb-s-5); --s-6:var(--pb-s-6); --s-7:var(--pb-s-7);
  --s-8:var(--pb-s-8); --s-10:var(--pb-s-10); --s-12:var(--pb-s-12);
  --s-14:var(--pb-s-14); --s-16:var(--pb-s-16); --s-20:var(--pb-s-20);
  --s-24:var(--pb-s-24); --s-32:var(--pb-s-32);
  --r-xs:var(--pb-r-xs); --r-sm:var(--pb-r-sm); --r-md:var(--pb-r-md);
  --r-lg:var(--pb-r-lg); --r-xl:var(--pb-r-xl); --r-2xl:var(--pb-r-2xl); --r-pill:var(--pb-r-pill);
  --sh-flat:var(--pb-sh-flat); --sh-sheet:var(--pb-sh-sheet);
  --sh-raised:var(--pb-sh-raised); --sh-glow:var(--pb-sh-glow);
  --sh-focus:var(--pb-sh-focus); --sh-up:0 0 0 1px rgba(41,214,138,0.4) inset;
  --sh-down:0 0 0 1px rgba(240,80,112,0.4) inset;
  --ease-std:var(--pb-ease-std); --ease-decel:var(--pb-ease-decel);
  --ease-emph:var(--pb-ease-std); --ease-accel:var(--pb-ease-std); --ease-spring:var(--pb-ease-spring);
  --d-instant:60ms; --d-fast:var(--pb-d-fast); --d-base:var(--pb-d-base);
  --d-slow:var(--pb-d-slow); --d-expr:var(--pb-d-slow);
  --grid-max:var(--pb-grid-max); --grid-gutter:var(--pb-gutter);
  --rail-w:var(--pb-rail-w); --side-w:var(--pb-side-w); --header-h:var(--pb-hdr-h);
  --subnav-h:44px; --bp-sm:480px; --bp-md:720px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1480px;
  --z-base:var(--pb-z-base); --z-rail:var(--pb-z-rail); --z-sticky:var(--pb-z-sticky);
  --z-drawer:var(--pb-z-drawer); --z-toast:var(--pb-z-toast); --z-modal:var(--pb-z-modal);
  --z-overlay:100;
}

@media (max-width:1024px) {
  :root { --pb-gutter:16px; --pb-hdr-h:56px; }
}
@media (prefers-reduced-motion:reduce) {
  :root { --pb-d-fast:0ms; --pb-d-base:0ms; --pb-d-slow:0ms; }
}