/* ==========================================================================
   TITANIUM OBSIDIAN & PRECISION VIOLET AURORA MIDNIGHT DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM (TITANIUM OBSIDIAN & PRECISION VIOLET AURORA)
     ------------------------------------------------------------------------ */
  --bg-deep-black: #07090e;
  --bg-dark-navy: #0d1019;
  --bg-charcoal: #131722;
  --bg-card-glass: rgba(19, 23, 34, 0.85);
  --bg-card-glass-hover: rgba(28, 34, 50, 0.94);
  --bg-nav-glass: rgba(7, 9, 14, 0.92);

  /* Precision Accents */
  --accent-indigo: #6366f1;
  --accent-indigo-light: #818cf8;
  --accent-indigo-glow: rgba(99, 102, 241, 0.35);

  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.35);

  --accent-gold: #fbbf24;
  --accent-gold-light: #fef08a;
  --accent-gold-glow: rgba(251, 191, 36, 0.35);

  --accent-emerald: #34d399;
  --accent-emerald-glow: rgba(52, 211, 153, 0.35);

  --accent-purple: #c084fc;

  /* Typography Colors */
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  /* Master Luxury Gradients */
  --grad-primary-text: linear-gradient(135deg, #ffffff 0%, #cbd5e1 60%, #94a3b8 100%);
  --grad-accent-text: linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #38bdf8 100%);
  --grad-gold-text: linear-gradient(135deg, #fef08a 0%, #fbbf24 50%, #f59e0b 100%);
  --grad-btn-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --grad-btn-gold: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  --grad-aurora: radial-gradient(circle at 50% -10%, rgba(99, 102, 241, 0.22) 0%, rgba(56, 189, 248, 0.12) 35%, rgba(251, 191, 36, 0.08) 65%, transparent 85%);

  /* Border & Rim Lighting */
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-glass: rgba(255, 255, 255, 0.14);
  --border-glow-indigo: rgba(99, 102, 241, 0.55);
  --border-glow-gold: rgba(251, 191, 36, 0.55);

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     ------------------------------------------------------------------------ */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-subheading: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-hero-title: clamp(3.1rem, 7.2vw, 5.8rem);
  --fs-h1: clamp(2.3rem, 4.4vw, 3.7rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-body: clamp(1.02rem, 1.08vw, 1.15rem);
  --fs-small: clamp(0.86rem, 0.92vw, 0.96rem);

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.02;
  --lh-snug: 1.25;
  --lh-normal: 1.65;
  --lh-relaxed: 1.8;

  /* ------------------------------------------------------------------------
     3. SPACING & CONTAINERS
     ------------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.5rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9.5rem;

  --container-max-width: 1440px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);

  /* ------------------------------------------------------------------------
     4. RADIUS & SHADOW
     ------------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-full: 9999px;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 35px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.75);
  --shadow-glass: 0 25px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* ------------------------------------------------------------------------
     5. Z-INDEX & TIMINGS
     ------------------------------------------------------------------------ */
  --z-background: -1;
  --z-canvas: 1;
  --z-base: 10;
  --z-header: 100;
  --z-modal: 1000;

  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-apple);
  --transition-normal: 0.35s var(--ease-apple);
  --transition-slow: 0.6s var(--ease-apple);
}