/* ============================================================
   variables.css — Design tokens (single source of truth)
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --color-bg-primary:    #080C14;
  --color-bg-secondary:  #0D1526;
  --color-bg-elevated:   #131E35;

  /* ── Accent colors ── */
  --color-accent-primary:   #4F8EF7;
  --color-accent-secondary: #7B5EA7;
  --color-accent-tertiary:  #00D4AA;
  --color-accent-warm:      #F97316;

  /* ── Gradients ── */
  --gradient-hero:  linear-gradient(135deg, #080C14 0%, #1A1040 50%, #080C14 100%);
  --gradient-brand: linear-gradient(135deg, #4F8EF7 0%, #7B5EA7 100%);
  --gradient-teal:  linear-gradient(135deg, #00D4AA 0%, #4F8EF7 100%);
  --gradient-warm:  linear-gradient(135deg, #F97316 0%, #7B5EA7 100%);
  --gradient-text:  linear-gradient(90deg, #4F8EF7, #7B5EA7, #00D4AA);

  /* ── Glassmorphism ── */
  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-blur:     blur(16px);

  /* ── Text ── */
  --color-text-primary:   #F0F4FF;
  --color-text-secondary: #8A96B0;
  --color-text-muted:     #4A5568;

  /* ── Typography ── */
  --font-display: 'Syne', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing (base 8px) ── */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
  --space-16: 128px;

  /* ── Border radius ── */
  --radius-sm:  8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(79, 142, 247, 0.2);
  --shadow-glow-strong: 0 0 60px rgba(79, 142, 247, 0.35);

  /* ── Transitions ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* ── Layout ── */
  --container-max: 1200px;
  --nav-height: 72px;
}