/* ============================================
   VARIABLES — Paleta & tokens
   ============================================ */
:root {
  /* === Dark blue palette === */
  --bg-deep:        #0a1929;
  --bg-elevated:    #0f2942;
  --bg-raised:      #1e3a5f;
  --bg-overlay:     rgba(10, 25, 41, 0.85);
  --bg-glass:       rgba(30, 58, 95, 0.45);

  /* === Cream tones === */
  --cream-50:       #fdf7ee;
  --cream-100:      #f5e6d3;
  --cream-200:      #e8d5b7;
  --cream-300:      #d9c19c;

  /* === Orange accent === */
  --orange-400:     #ffa56b;
  --orange-500:     #ff8c42;
  --orange-600:     #ff6b35;
  --orange-700:     #e54e1a;

  /* === Blue highlights === */
  --blue-300:       #6ba6e8;
  --blue-400:       #4a90e2;
  --blue-500:       #2f6fc0;

  /* === Text === */
  --text-primary:   #f5e6d3;
  --text-secondary: #e8d5b7;
  --text-muted:     #a4b5cc;
  --text-dim:       #6a7d96;
  --text-on-orange: #1a0f08;

  /* === Status === */
  --success:        #4ade80;
  --danger:         #f87171;
  --warning:        #facc15;
  --info:           #60a5fa;

  /* === Gradients === */
  --gradient-hero:    linear-gradient(135deg, #0a1929 0%, #0f2942 45%, #ff8c42 110%);
  --gradient-cta:     linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
  --gradient-cream:   linear-gradient(135deg, #f5e6d3 0%, #e8d5b7 100%);
  --gradient-card:    linear-gradient(160deg, rgba(30,58,95,0.6) 0%, rgba(15,41,66,0.9) 100%);
  --gradient-border:  linear-gradient(135deg, #4a90e2 0%, #ff8c42 100%);
  --gradient-text:    linear-gradient(135deg, #f5e6d3 0%, #ff8c42 100%);

  /* === Shadows === */
  --shadow-sm:        0 2px 6px rgba(0,0,0,0.25);
  --shadow-md:        0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:        0 16px 48px rgba(0,0,0,0.45);
  --shadow-glow:      0 0 40px rgba(255,140,66,0.35);
  --shadow-glow-blue: 0 0 40px rgba(74,144,226,0.25);
  --shadow-inset:     inset 0 1px 0 rgba(245,230,211,0.08);

  /* === Radius === */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* === Spacing === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* === Type === */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;

  /* === Transitions === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  /* === Layout === */
  --container: 1240px;
  --container-narrow: 920px;
  --header-h: 76px;
}