/* === ENCOURAGEMENT BY EMPOWERMENT — DESIGN TOKENS (PREMIUM) === */
:root {
  /* Brand Core */
  --color-primary:        #2563EB;
  --color-primary-light:  #60A5FA;
  --color-primary-dark:   #1D4ED8;
  --color-secondary:      #7C3AED;
  --color-secondary-light:#A78BFA;
  --color-accent:         #F59E0B;
  --color-accent-warm:    #EF4444;
  --color-success:        #10B981;
  --color-info:           #06B6D4;

  /* Light Theme */
  --bg-base:              #FAFAF9;
  --bg-surface:           #FFFFFF;
  --bg-elevated:          #F3F4F6;
  --bg-glass:             rgba(255,255,255,0.72);
  --text-primary:         #111827;
  --text-secondary:       #4B5563;
  --text-muted:           #9CA3AF;
  --border:               rgba(0,0,0,0.08);
  --border-light:         rgba(0,0,0,0.04);

  /* Dark Theme (overridden by [data-theme="dark"]) */
  --bg-base-dark:         #0D1117;
  --bg-surface-dark:      #161B22;
  --bg-elevated-dark:     #21262D;
  --bg-glass-dark:        rgba(22,27,34,0.82);
  --text-primary-dark:    #F0F6FC;
  --text-secondary-dark:  #8B949E;
  --text-muted-dark:      #6B7280;
  --border-dark:          rgba(255,255,255,0.08);
  --border-light-dark:    rgba(255,255,255,0.03);

  /* Premium Gradients */
  --gradient-hero:        linear-gradient(135deg, #1E3A8A 0%, #7C3AED 40%, #2563EB 100%);
  --gradient-hero-alt:    linear-gradient(160deg, #0F172A 0%, #1E3A8A 30%, #7C3AED 70%, #2563EB 100%);
  --gradient-cta:         linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --gradient-cta-alt:     linear-gradient(135deg, #F59E0B 0%, #EC4899 50%, #EF4444 100%);
  --gradient-card:        linear-gradient(145deg, rgba(37,99,235,0.05), rgba(124,58,237,0.08));
  --gradient-card-hover:  linear-gradient(145deg, rgba(37,99,235,0.1), rgba(124,58,237,0.15));
  --gradient-navy:        linear-gradient(135deg, #1E3A8A, #2563EB);
  --gradient-purple:      linear-gradient(135deg, #7C3AED, #2563EB);
  --gradient-warm:        linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-cool:        linear-gradient(135deg, #06B6D4, #2563EB);
  --gradient-glass:       linear-gradient(145deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));

  /* Premium Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-xl:  0 25px 50px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.10);
  --shadow-2xl: 0 35px 60px rgba(0,0,0,0.18), 0 15px 30px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 30px rgba(37,99,235,0.25);
  --shadow-glow-accent: 0 0 30px rgba(245,158,11,0.25);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.05);

  /* Spacing Scale */
  --space-xs:   0.25rem;
  --pace-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;
  --space-4xl:  8rem;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;

  /* Transitions & Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth:   cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --duration-xl:   900ms;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-accent:  'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 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;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  --tracking-tight:  -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.05em;
  --tracking-widest: 0.15em;

  /* Z-Index Scale */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     5000;

  /* Breakpoints (for reference) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-base:     var(--bg-base-dark);
  --bg-surface:  var(--bg-surface-dark);
  --bg-elevated: var(--bg-elevated-dark);
  --bg-glass:    var(--bg-glass-dark);
  --text-primary:   var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-muted:     var(--text-muted-dark);
  --border:      var(--border-dark);
  --border-light: var(--border-light-dark);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 20px 40px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
  --shadow-xl:  0 25px 50px rgba(0,0,0,0.6), 0 12px 24px rgba(0,0,0,0.4);
  --shadow-2xl: 0 35px 60px rgba(0,0,0,0.7), 0 15px 30px rgba(0,0,0,0.5);
  --gradient-card: linear-gradient(145deg, rgba(37,99,235,0.1), rgba(124,58,237,0.12));
  --gradient-card-hover: linear-gradient(145deg, rgba(37,99,235,0.18), rgba(124,58,237,0.22));
  --shadow-glow: 0 0 40px rgba(37,99,235,0.15);
  --shadow-glow-accent: 0 0 40px rgba(245,158,11,0.15);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-xl: 0ms;
  }
}