/* ═══════════════════════════════════════════════════════════
   EFP Design System — Color Palette, Tokens & Variables
   Warm Professional Theme · Construction Trust · Premium Feel
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Primary Palette ───────────────────────────────────── */
  --primary:        #1B5FA8;
  --primary-dark:   #154A84;
  --primary-light:  #2E7DC5;
  --primary-bg:     #EBF2FA;
  --primary-900:    #0D3460;
  --primary-800:    #154A84;
  --primary-600:    #1B5FA8;
  --primary-400:    #4A93D4;
  --primary-200:    #A8CCEC;
  --primary-100:    #D4E6F6;
  --primary-50:     #EBF2FA;

  /* ── Accent / CTA ─────────────────────────────────────── */
  --accent:         #E8720C;
  --accent-dark:    #C55F08;
  --accent-light:   #FFF3E8;
  --accent-600:     #D46508;
  --accent-400:     #F09030;
  --accent-200:     #FBC890;
  --accent-100:     #FDE8CC;
  --accent-glow:    rgba(232, 114, 12, 0.25);

  /* ── Neutral Palette (Light Theme) ─────────────────────── */
  --white:          #FFFFFF;
  --gray-50:        #FAFBFC;
  --gray-100:       #F4F5F7;
  --gray-200:       #E8EAED;
  --gray-300:       #D1D5DB;
  --gray-400:       #9CA3AF;
  --gray-500:       #6B7280;
  --gray-600:       #4B5563;
  --gray-700:       #374151;
  --gray-800:       #1F2937;
  --gray-900:       #111827;
  --gray-950:       #0A0E17;

  /* ── Warm Tones ────────────────────────────────────────── */
  --warm-50:        #FFFBF5;
  --warm-100:       #FEF3E2;
  --warm-200:       #FDDCB0;
  --warm-cream:     #FDF8F0;

  /* ── Semantic Colors ───────────────────────────────────── */
  --success:        #059669;
  --success-light:  #ECFDF5;
  --warning:        #D97706;
  --error:          #DC2626;

  /* ── Gradients ─────────────────────────────────────────── */
  --grad-primary:     linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  --grad-primary-warm: linear-gradient(135deg, var(--primary) 0%, #1a4f8a 50%, #2a6db5 100%);
  --grad-accent:      linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  --grad-hero:        linear-gradient(135deg, var(--gray-950) 0%, var(--primary-900) 100%);
  --grad-warm:        linear-gradient(180deg, var(--warm-cream) 0%, var(--white) 100%);
  --grad-cool:        linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
  --grad-section-alt: linear-gradient(180deg, var(--primary-50) 0%, var(--white) 100%);
  --grad-dark:        linear-gradient(180deg, var(--gray-900) 0%, var(--gray-950) 100%);
  --grad-stripe:      linear-gradient(90deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%);

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:   'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing Scale ─────────────────────────────────────── */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-2xl:      48px;
  --space-3xl:      64px;
  --space-4xl:      96px;
  --space-5xl:      128px;

  /* ── Radius ────────────────────────────────────────────── */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-2xl:     20px;
  --radius-full:    9999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl:     0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 10px 25px rgba(27,95,168,0.12), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-card-lift:  0 20px 40px rgba(27,95,168,0.15), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-glow-primary: 0 0 20px rgba(27,95,168,0.2);
  --shadow-glow-accent:  0 0 20px rgba(232,114,12,0.2);
  --shadow-inner:   inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── Transitions ───────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Animation Durations ───────────────────────────────── */
  --anim-fast:      0.3s;
  --anim-base:      0.6s;
  --anim-slow:      0.8s;
  --anim-stagger:   0.08s;

  /* ── Layout ────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --nav-height:     72px;

  /* ── Legacy compat (mapped from old dark theme) ───────── */
  --dark:           var(--gray-900);
  --surface:        var(--gray-100);
  --yellow:         var(--accent);
  --gray:           var(--gray-500);
  --blue:           var(--primary);
  --blue-light:     var(--primary-light);
  --blue-dim:       rgba(27, 95, 168, 0.15);
  --card:           var(--gray-800);
  --border:         var(--gray-200);
  --gray-light:     var(--gray-400);
}

/* ── Prefers reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}