/* WagerCue - Design Tokens ("Amber Terminal") */
/* Dark, data-dense, terminal-style identity. Electric amber accent;
   green/red reserved for win/loss + odds movement. Distinct from sibling
   vertical brands in the multi-vertical comparison platform. */
:root {
  /* Brand ramp - electric amber */
  --brand-50:  #fff6e8;
  --brand-100: #ffe9c2;
  --brand-200: #ffd68a;
  --brand-300: #ffae38;
  --brand-400: #ffb01f;
  --brand-500: #ffa31a;
  --brand-600: #f08a00;
  --brand-700: #c26b00;
  --brand-800: #8f4f00;
  --brand-900: #6b3c00;
  --brand-950: #3d2200;

  /* Surfaces - near-black slate, never pure black */
  --color-bg:            #0b0e14;
  --color-surface:       #141a24;
  --color-surface-2:     #1b2432;
  --color-surface-3:     #232f40;
  --color-fg:            #f3f6fb;
  --color-muted:         #94a3b8;
  --color-muted-2:       #64748b;
  --color-border:        #233043;
  --color-border-light:  #1a2230;

  /* Primary (amber) */
  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-400);
  --color-primary-bg:    #1a2230;
  --color-primary-light: #232f40;
  --color-on-primary:    #140c00;

  /* Data / market semantics - the ticker */
  --color-up:            #22c55e;
  --color-up-bg:         #0e2a1b;
  --color-down:          #f43f5e;
  --color-down-bg:       #2a0f16;

  --color-success:       #22c55e;
  --color-success-bg:    #0e2a1b;
  --color-warning:       #fbbf24;
  --color-warning-bg:    #2a2109;
  --color-danger:        #f43f5e;
  --color-danger-bg:     #2a0f16;

  /* Sponsor / featured - restrained warm gold (used sparingly) */
  --color-sponsor:       #f5b544;
  --color-sponsor-bg:    #2a2109;
  --color-sponsor-border:#4a3410;
  --color-sponsor-badge: #f5b544;

  /* Type - technical display + monospace numerics */
  --font-display: 'Space Grotesk', 'Söhne', 'Avenir Next', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  0.875rem;
  --radius-xl:  1.25rem;
  --radius-full: 9999px;

  /* Shadows - dark elevation + amber glow on interaction */
  --shadow-card:       0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-card-hover: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,163,26,0.10);
  --shadow-button:     0 4px 20px rgba(255,163,26,0.30);
  --shadow-glow:       0 0 24px rgba(255,163,26,0.22);
}