/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Single source of truth for all visual values
   RobotBets Design System v2.0
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORS: Background Elevation (4 levels) ──────────────── */
  --rb-bg-base:       #08090d;                    /* Page void (deepest black) */
  --rb-bg-surface:    #0e1118;                    /* Cards, panels */
  --rb-bg-elevated:   #131722;                    /* Modals, dropdowns, hover */
  --rb-bg-overlay:    #1e2535;                    /* Popovers, tooltips */

  /* ── COLORS: Brand (Quantum Cyan) ───────────────────────── */
  --rb-brand:         #00f0ff;                    /* Primary cyan */
  --rb-brand-hover:   #00c8d6;                    /* Hover / darker cyan */
  --rb-brand-subtle:  rgba(0, 240, 255, 0.10);    /* Tinted backgrounds */
  --rb-brand-muted:   rgba(0, 240, 255, 0.04);    /* Very subtle wash */

  /* ── COLORS: Accent ─────────────────────────────────────── */
  --rb-accent-magenta: #ff007a;                   /* Secondary accent */
  --rb-accent-green:   #00ff66;                   /* Tertiary / success */

  /* ── COLORS: Semantic ─────────────────────────────────────── */
  --rb-success:       #00ff66;
  --rb-success-subtle:rgba(0, 255, 102, 0.10);
  --rb-danger:        #ff007a;
  --rb-danger-subtle: rgba(255, 0, 122, 0.10);
  --rb-warning:       #f59e0b;
  --rb-warning-subtle:rgba(245, 158, 11, 0.10);
  --rb-info:          #00f0ff;
  --rb-info-subtle:   rgba(0, 240, 255, 0.10);

  /* ── COLORS: Text ─────────────────────────────────────────── */
  --rb-text-primary:   #ffffff;
  --rb-text-secondary: #a0aec0;
  --rb-text-tertiary:  #4a5568;
  --rb-text-disabled:  #2d3748;
  --rb-text-inverse:   #08090d;

  /* ── COLORS: Borders ──────────────────────────────────────── */
  --rb-border:         #1e2535;
  --rb-border-muted:   rgba(255, 255, 255, 0.04);
  --rb-border-strong:  #3b4968;
  --rb-border-brand:   rgba(0, 240, 255, 0.3);

  /* ── SPACING: 4px base unit ───────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── BORDER RADIUS (QUANTUM: all sharp edges) ─────────────── */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill:  0;

  /* ── SHADOWS (QUANTUM: none — flat surfaces only) ─────────── */
  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-xl:   none;
  --shadow-glow: none;

  /* ── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-sans:  'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', ui-monospace, 'Courier New', monospace;

  --text-2xs:   0.6875rem;   /* 11px */
  --text-xs:    0.75rem;     /* 12px */
  --text-sm:    0.875rem;    /* 14px */
  --text-base:  1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.25rem;     /* 20px */
  --text-2xl:   1.5rem;      /* 24px */
  --text-3xl:   2rem;        /* 32px */
  --text-4xl:   2.5rem;      /* 40px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;

  /* ── TRANSITIONS ──────────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
  --duration-slower: 500ms;

  /* ── Z-INDEX SCALE ────────────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   250;
  --z-modal:     300;
  --z-toast:     400;

  /* ── GLASS EFFECT (QUANTUM: disabled — flat surfaces) ──────── */
  --glass-blur:   none;
  --glass-bg:     var(--rb-bg-surface);
  --glass-border: var(--rb-border);
}


/* ═══════════════════════════════════════════════════════════════
   BACKWARD COMPATIBILITY ALIASES
   Maps old variable names to new tokens so existing CSS works
   ═══════════════════════════════════════════════════════════════ */

/* data-pages-theme.css aliases */
body.rb-style-page {
  --rb-bg-primary:   var(--rb-bg-base);
  --rb-bg-secondary: var(--rb-bg-surface);
  --rb-bg-tertiary:  var(--rb-bg-elevated);
  --rb-brand-dark:   var(--rb-brand-hover);
}

/* player-stats.css aliases */
.player-stats-page {
  --ps-bg-primary:    var(--rb-bg-base);
  --ps-bg-secondary:  var(--rb-bg-surface);
  --ps-bg-tertiary:   var(--rb-bg-elevated);
  --ps-text-primary:  var(--rb-text-primary);
  --ps-text-secondary:var(--rb-text-secondary);
  --ps-brand:         var(--rb-brand);
  --ps-border:        var(--rb-border);
}

/* futuristic-theme.css aliases */
:root {
  --bg-primary:      var(--rb-bg-base);
  --bg-secondary:    var(--rb-bg-surface);
  --bg-tertiary:     var(--rb-bg-elevated);
  --border-primary:  var(--rb-border);
  --brand-primary:   var(--rb-brand);
  --brand-secondary: var(--rb-brand-hover);
  --text-primary:    var(--rb-text-primary);
  --text-secondary:  var(--rb-text-secondary);
}