/* ============================================
   ASTROCHARTS — Design System Tokens v1.0
   Dark Cosmic Premium Theme
   Extracted from Landing Page Mockup
   ============================================ */

:root {
  /* ---- Background Layers ---- */
  --bg-deep:       #070A12;
  --bg-base:       #0A0A1A;
  --bg-surface:    #0C1220;
  --bg-surface-2:  #111B2E;
  --bg-surface-3:  #1A1230;
  --bg-card:       rgba(21, 16, 42, 0.65);
  --bg-card-hover: rgba(30, 20, 53, 0.75);

  /* ---- Glass / Overlay ---- */
  --glass-bg:      rgba(15, 12, 30, 0.55);
  --glass-border:  rgba(123, 63, 190, 0.20);
  --glass-blur:    16px;

  /* ---- Brand Colors ---- */
  --brand:         #7C5CFF;
  --brand-light:   #9B7AFF;
  --brand-dark:    #5A3CD4;
  --brand-glow:    rgba(124, 92, 255, 0.25);

  /* ---- Accent: Gold (CTAs) ---- */
  --gold:          #D4A04A;
  --gold-light:    #E8B960;
  --gold-dark:     #C4943A;
  --gold-gradient: linear-gradient(135deg, #C4943A 0%, #E8B960 50%, #D4A04A 100%);
  --gold-glow:     0 0 24px rgba(212, 160, 74, 0.35);

  /* ---- Accent: Cyan (sparsam) ---- */
  --accent:        #22D3EE;
  --accent-light:  #67E8F9;
  --accent-glow:   rgba(34, 211, 238, 0.20);

  /* ---- Accent: Green (Credits/Success) ---- */
  --green:         #4ADE80;
  --green-dark:    #22C55E;
  --green-glow:    rgba(74, 222, 128, 0.20);

  /* ---- Nebula / Atmospheric ---- */
  --nebula-purple: #5E2D6E;
  --nebula-pink:   #8B3A8B;
  --nebula-blue:   #1E3A5F;

  /* ---- Text ---- */
  --text:          rgba(255, 255, 255, 0.92);
  --text-muted:    rgba(255, 255, 255, 0.68);
  --text-subtle:   rgba(255, 255, 255, 0.45);
  --text-on-gold:  #1A1A2E;

  /* ---- Borders ---- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-light:  rgba(255, 255, 255, 0.12);
  --border-glow:   rgba(107, 63, 160, 0.30);

  /* ---- Shadows ---- */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 40px rgba(124, 92, 255, 0.15);

  /* ---- Radius ---- */
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-pill:   9999px;

  /* ---- Typography ---- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'Space Grotesk', 'Inter', sans-serif;

  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.8125rem;  /* 13px */
  --text-base:     0.9375rem;  /* 15px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      2rem;       /* 32px */
  --text-4xl:      2.5rem;     /* 40px */
  --text-5xl:      3rem;       /* 48px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* ---- Spacing Scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Layout ---- */
  --max-width:     1140px;
  --nav-height:    68px;
  --touch-min:     44px;

  /* ---- Transitions ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
}