/* ============================================================
   PALETTE A — ROYAL GOLD
   Premium, trustworthy — charcoal base + deep gold + electric blue
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-base:        #0B0F14;
  --bg-deep:        #070A0E;
  --bg-surface:     #141A23;
  --bg-card:        rgba(255,255,255,0.04);
  --bg-card-hover:  rgba(245,197,24,0.08);
  --bg-glass:       rgba(20,26,35,0.78);

  /* ── Accent Colors ───────────────────────────────────────── */
  --accent-violet:  #F5C518;  /* primary → gold */
  --accent-violet2: #FFD54F;
  --accent-orange:  #2979FF;  /* secondary → electric blue */
  --accent-orange2: #5B9BFF;
  --accent-teal:    #14B8A6;
  --accent-gold:    #F5C518;
  --accent-red:     #EF4444;

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-violet:    linear-gradient(135deg, #F5C518 0%, #C99A0D 100%);
  --grad-orange:    linear-gradient(135deg, #2979FF 0%, #0B4FD8 100%);
  --grad-teal:      linear-gradient(135deg, #14B8A6 0%, #0D8B7D 100%);
  --grad-hero:      linear-gradient(135deg, #0B0F14 0%, #1a1608 50%, #0a1020 100%);
  --grad-card:      linear-gradient(135deg, rgba(245,197,24,0.10) 0%, rgba(41,121,255,0.05) 100%);

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: #A3B1C2;
  --text-muted:     #6B7789;
  --text-accent:    #F5C518;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-subtle:  rgba(245,197,24,0.18);
  --border-card:    rgba(255,255,255,0.08);
  --border-glow:    rgba(245,197,24,0.45);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

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

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.5);
  --shadow-violet: 0 0 30px rgba(245,197,24,0.35);
  --shadow-orange: 0 0 30px rgba(41,121,255,0.35);
  --shadow-glow:   0 0 60px rgba(245,197,24,0.22);

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

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Container ───────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}