/* ── BEEGEN DESIGN TOKENS ──────────────────────────────── */
:root {
  /* Brand Colors */
  --teal:       #02C39A;
  --teal-dark:  #028090;
  --teal-light: #5CEBC9;
  --navy:       #00152E;
  --navy-mid:   #002147;
  --orange:     #F37934;
  --orange-light:#FBA026;
  --yellow:     #F0F3BD;

  /* Neutrals */
  --white:      #FFFFFF;
  --cloud:      #F4F8FB;
  --mist:       #E8F0F7;
  --gray-100:   #F1F5F9;
  --gray-200:   #E2EAF0;
  --gray-400:   #94A3B8;
  --gray-600:   #64748B;
  --gray-800:   #1E293B;
  --dark:       #0D1B2A;

  /* Gradients */
  --grad-hero:  linear-gradient(135deg, #00152E 0%, #002147 50%, #013A5C 100%);
  --grad-teal:  linear-gradient(135deg, #02C39A 0%, #028090 100%);
  --grad-orange:linear-gradient(135deg, #F37934 0%, #FBA026 100%);
  /* Hero atmosphere: layered radial glows composited over --grad-hero */
  --glow-hero:
    radial-gradient(ellipse at 70% 30%, rgba(2,195,154,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(243,121,52,.08) 0%, transparent 50%);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,21,46,.08);
  --shadow:     0 4px 24px rgba(0,21,46,.12);
  --shadow-lg:  0 12px 48px rgba(0,21,46,.18);
  --shadow-xl:  0 24px 80px rgba(0,21,46,.24);
  --shadow-teal:0 8px 32px rgba(2,195,154,.25);
  --shadow-orange:0 8px 32px rgba(243,121,52,.3);

  /* Typography */
  --font-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing */
  --section-y:  96px;
  --container:  1240px;
  --radius-sm:     6px;
  --radius-button: 9px;
  --radius:        12px;
  --radius-card:   14px;
  --radius-lg:     20px;
  --radius-xl:     32px;
  --radius-pill:   100px;

  /* Transitions */
  --ease:       cubic-bezier(.4,0,.2,1);
  --transition: .22s cubic-bezier(.4,0,.2,1);
  --transition-slow: .45s cubic-bezier(.4,0,.2,1);

  /* Semantic color aliases */
  --color-fg:        var(--navy);
  --color-fg-body:   #475569;
  --color-fg-muted:  var(--gray-400);
  --color-bg:        var(--white);
  --color-bg-tint:   var(--cloud);
  --color-bg-dark:   var(--navy);
  --color-bg-deep:   var(--dark);
  --color-border:    var(--mist);
  --color-accent:    var(--teal);
  --color-on-accent: var(--navy);
  --color-danger:    #ef4444;
  --color-star:      #F59E0B;

}