/* DebitCue - Design Tokens (Violet & Gold) */
:root {
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-800: #5b21b6;
  --brand-900: #4c1d95;
  --brand-950: #2e1065;

  --color-bg:           #faf9fc;
  --color-surface:      #ffffff;
  --color-surface-2:    #f4f2f9;
  --color-fg:           #19151f;
  --color-fg-2:         #443e4f;
  --color-muted:        #6b6477;
  --color-muted-2:      #8b8597;
  --color-border:       #e7e3ef;
  --color-border-light: #f1eef7;

  --color-primary:       var(--brand-700);
  --color-primary-hover: var(--brand-800);
  --color-primary-bg:    var(--brand-50);
  --color-primary-light: var(--brand-100);

  --color-success:       #15803d;
  --color-success-bg:    #f0fdf4;
  --color-warning:       #d97706;
  --color-warning-bg:    #fffbeb;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fef2f2;

  --color-award:         #b8860b;
  --color-award-bg:      #fdf6e3;
  --color-award-border:  #e8c876;
  --color-award-badge:   #d4a017;

  --color-sponsor:       #b8860b;
  --color-sponsor-bg:    #fdf6e3;
  --color-sponsor-border:#e8c876;
  --color-sponsor-badge: #d4a017;

  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 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.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 9999px;

  --shadow-card:  0 1px 3px rgba(28,25,23,0.06), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-card-hover: 0 10px 25px rgba(28,25,23,0.08), 0 4px 10px rgba(28,25,23,0.04);
  --shadow-button: 0 4px 14px rgba(109,40,217,0.28);
}