/**
 * Sikkora Design System Tokens (CSS Variables)
 */

:root {
  /* Color Palette */
  --color-primary: #6366f1;         /* Indigo 500 (Vibrant Brand Color) */
  --color-primary-hover: #4f46e5;   /* Indigo 600 */
  --color-primary-glow: rgba(99, 102, 241, 0.15);
  
  --color-secondary: #8b5cf6;       /* Violet 500 (Subtle Accents & Gradients) */
  --color-secondary-hover: #7c3aed; /* Violet 600 */
  
  --color-accent: #fbbf24;          /* Amber 400 (Gold Coins/Rewards Accent) */
  --color-accent-glow: rgba(251, 191, 36, 0.3);
  
  --color-background: #f8fafc;      /* Slate 50 (Clean, bright backdrop) */
  --color-surface: #ffffff;         /* Pure white (Cards, sections) */
  --color-surface-hover: #f1f5f9;   /* Slate 100 */
  
  --color-text: #0f172a;            /* Slate 900 (Main text) */
  --color-text-muted: #475569;      /* Slate 600 (Paragraphs, subtext) */
  --color-text-light: #94a3b8;      /* Slate 400 (Captions, placeholding) */
  
  --color-border: #e2e8f0;          /* Slate 200 (Clean divider lines) */
  --color-border-hover: #cbd5e1;    /* Slate 300 */
  
  --color-success: #10b981;         /* Emerald 500 */
  --color-success-bg: #ecfdf5;      /* Emerald 50 */
  
  --color-warning: #f59e0b;         /* Amber 500 */
  --color-warning-bg: #fffbeb;      /* Amber 50 */
  
  --color-error: #ef4444;           /* Red 500 */
  --color-error-bg: #fef2f2;        /* Red 50 */

  /* Dark Mode Overrides (for specific elements or sections) */
  --color-dark-bg: #0b0f19;         /* Premium deep slate black */
  --color-dark-surface: #131b2e;    /* Deep slate surface */
  --color-dark-text: #f8fafc;       /* Light text for dark sections */
  --color-dark-text-muted: #94a3b8; /* Muted text for dark sections */
  --color-dark-border: #1e293b;     /* Border for dark sections */

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Shadows (Smooth & Layered) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  --shadow-glow: 0 0 25px rgba(99, 102, 241, 0.25);
  --shadow-glow-accent: 0 0 25px rgba(251, 191, 36, 0.35);

  /* Corner Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout Consts */
  --max-width-desktop: 1200px;
  --header-height: 80px;
}