/* ============================================================
   variables.css — Design Token Registry
   Single source of truth. All values live here.
   ============================================================ */

:root {
  /* ── Colour Palette ─────────────────────────────────────── */
  --color-navy-deep:   #030820;
  --color-navy:        #050B2E;
  --color-navy-800:    #0A1448;
  --color-navy-700:    #0F1D6B;
  --color-royal:       #1B4FD8;
  --color-royal-light: #3B6FF0;
  --color-royal-pale:  #A8C4FF;
  --color-gold:        #D4AF37;
  --color-gold-light:  #F0CD5A;
  --color-gold-pale:   #FBF0C0;
  --color-cyan:        #06B6D4;
  --color-green:       #22C55E;
  --color-red:         #EF4444;
  --color-orange:      #FB923C;
  --color-purple:      #A855F7;
  --color-white:       #FFFFFF;

  /* ── Semantic Aliases ───────────────────────────────────── */
  --bg-primary:    var(--color-navy);
  --bg-secondary:  var(--color-navy-800);
  --text-primary:  var(--color-white);
  --text-muted:    rgba(255, 255, 255, 0.55);
  --text-faint:    rgba(255, 255, 255, 0.30);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-glow:   rgba(27, 79, 216, 0.40);

  /* ── Alpha Fills ────────────────────────────────────────── */
  --glass-bg:           rgba(255, 255, 255, 0.04);
  --glass-bg-hover:     rgba(27, 79, 216, 0.10);
  --glass-bg-gold:      rgba(212, 175, 55, 0.07);
  --glow-royal:         rgba(27, 79, 216, 0.40);
  --glow-gold:          rgba(212, 175, 55, 0.30);
  --glow-royal-intense: rgba(27, 79, 216, 0.65);

  /* ── Gradients ──────────────────────────────────────────── */
  --gradient-royal:    linear-gradient(135deg, #1B4FD8, #3B6FF0);
  --gradient-gold:     linear-gradient(135deg, #D4AF37, #F0CD5A);
  --gradient-hero:     linear-gradient(135deg, #FFFFFF 0%, #A8C4FF 50%, #D4AF37 100%);
  --gradient-navy:     linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  --gradient-blob-blue: radial-gradient(circle, rgba(27, 79, 216, 0.45), transparent 70%);
  --gradient-blob-gold: radial-gradient(circle, rgba(212, 175, 55, 0.25), transparent 70%);
  --gradient-blob-teal: radial-gradient(circle, rgba(6, 182, 212, 0.20), transparent 70%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Sizing ─────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 50px;
  --radius-phone: 36px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --section-pad-y: clamp(5rem, 8vw, 7rem);
  --container-max: 80rem;   /* 1280px */
  --container-px:  clamp(1.5rem, 4vw, 2.5rem);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:  0 20px 60px rgba(27, 79, 216, 0.20);
  --shadow-phone: 0 30px 80px rgba(0, 0, 0, 0.50), 0 0 60px rgba(27, 79, 216, 0.20);
  --shadow-btn:   0 4px 20px rgba(27, 79, 216, 0.45);
  --shadow-btn-gold: 0 4px 20px rgba(212, 175, 55, 0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-reveal: 0.7s ease;
}