/* ============================================
   SignumEssentials v30 - Design System
   Indigo + Violet + Cyan + Gold Palette
   ============================================ */

:root {
  /* ========================================
     COLOR SYSTEM - Extended Spectrum
     ======================================== */

  /* Violet Spectrum - Primary Brand */
  --violet-50: #FAF5FF;
  --violet-100: #F3E8FF;
  --violet-200: #E9D5FF;
  --violet-300: #D8B4FE;
  --violet-400: #C084FC;
  --violet-500: #A855F7;
  --violet-600: #9333EA;
  --violet-700: #7C3AED;
  --violet-800: #6D28D9;
  --violet-900: #5B21B6;
  --violet-950: #4C1D95;

  /* Cyan Spectrum - Secondary */
  --cyan-50: #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;

  /* Indigo Spectrum - Brand Foundation */
  --indigo-50: #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;
  --indigo-950: #1E1B4B;
  --indigo-deep: #312E81;

  /* Gold Spectrum - CTA & Value Accent */
  --gold-50: #FEF9E7;
  --gold-100: #FDF0C8;
  --gold-200: #FBE18D;
  --gold-300: #F8CC52;
  --gold-400: #D4A640;
  --gold-500: #C4873C;
  --gold-600: #A97033;
  --gold-700: #8E5A2B;
  --gold-800: #744523;
  --gold-900: #5A351C;

  /* Semantic Aliases */
  --accent-primary: var(--violet-700);
  --accent-primary-light: var(--violet-500);
  --accent-primary-lighter: var(--violet-300);
  --accent-primary-dark: var(--violet-800);
  --accent-primary-darker: var(--violet-950);

  --accent-secondary: var(--cyan-500);
  --accent-secondary-light: var(--cyan-400);
  --accent-secondary-dark: var(--cyan-600);

  --accent-tertiary: var(--indigo-900);
  --accent-tertiary-light: var(--indigo-700);
  --accent-tertiary-dark: var(--indigo-950);

  /* Brand Palette - Indigo + Violet + Cyan + Gold */
  --brand-deep: #312E81;
  --brand-accent: #7C3AED;
  --brand-secondary: #06B6D4;
  /* Success/Warning/Danger */
  --success: #059669;
  --success-light: #10B981;
  --success-lighter: #34D399;
  --success-dark: #047857;

  --warning: #D97706;
  --warning-light: #F59E0B;
  --warning-lighter: #FBBF24;
  --warning-dark: #B45309;

  --danger: #DC2626;
  --danger-light: #EF4444;
  --danger-lighter: #F87171;
  --danger-dark: #B91C1C;

  /* Aliases */
  --error: var(--danger);
  --error-light: var(--danger-light);

  --info: #2563EB;
  --info-light: #3B82F6;

  /* ========================================
     BACKGROUNDS - Pristine & Layered
     ======================================== */

  --bg-pure: #FFFFFF;
  --bg-soft: #FAFBFC;
  --bg-cloud: #F1F5F9;
  --bg-mist: #E2E8F0;
  --bg-slate: #CBD5E1;

  /* Additional aliases for compatibility */
  --bg-primary: var(--bg-pure);
  --bg-secondary: var(--bg-soft);
  --bg-tertiary: var(--bg-cloud);

  /* Dark mode backgrounds (for CTA section) */
  --bg-void: #030712;
  --bg-space: #0F172A;
  --bg-night: #1E293B;

  /* Glass morphism */
  --glass-white: rgba(255, 255, 255, 0.85);
  --glass-white-light: rgba(255, 255, 255, 0.6);
  --glass-white-ultra: rgba(255, 255, 255, 0.95);
  --glass-violet: rgba(124, 58, 237, 0.05);
  --glass-cyan: rgba(6, 182, 212, 0.05);
  --glass-indigo: rgba(49, 46, 129, 0.05);
  --glass-dark: rgba(15, 23, 42, 0.8);

  /* ========================================
     TEXT COLORS
     ======================================== */

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-dim: #CBD5E1;

  /* Light text (for dark backgrounds) */
  --text-light: #FFFFFF;
  --text-light-secondary: rgba(255, 255, 255, 0.8);
  --text-light-muted: rgba(255, 255, 255, 0.6);

  /* ========================================
     GRADIENTS - Signature Effects
     ======================================== */

  /* Brand Gradient - Primary (Indigo → Violet → Cyan) */
  --gradient-brand: linear-gradient(
    135deg,
    #312E81 0%,
    #7C3AED 40%,
    #06B6D4 100%
  );

  /* Aurora Gradient - 4 Colors */
  --gradient-aurora: linear-gradient(
    135deg,
    #312E81 0%,
    #7C3AED 25%,
    #06B6D4 50%,
    #C4873C 75%,
    #7C3AED 100%
  );

  /* Vivid Gradient */
  --gradient-vivid: linear-gradient(
    135deg,
    #7C3AED 0%,
    #06B6D4 50%,
    #7C3AED 100%
  );

  /* Soft Gradient */
  --gradient-soft: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.05) 0%,
    rgba(124, 58, 237, 0.04) 50%,
    rgba(6, 182, 212, 0.03) 100%
  );

  /* Hero Background Mesh */
  --gradient-mesh-violet: radial-gradient(
    ellipse 80% 50% at 20% 40%,
    rgba(124, 58, 237, 0.15) 0%,
    transparent 50%
  );
  --gradient-mesh-cyan: radial-gradient(
    ellipse 60% 40% at 80% 20%,
    rgba(6, 182, 212, 0.12) 0%,
    transparent 50%
  );
  --gradient-mesh-indigo: radial-gradient(
    ellipse 50% 60% at 70% 80%,
    rgba(49, 46, 129, 0.1) 0%,
    transparent 50%
  );
  --gradient-mesh-gold: radial-gradient(
    ellipse 40% 30% at 30% 70%,
    rgba(196, 135, 60, 0.08) 0%,
    transparent 50%
  );

  /* Depth Gradient */
  --gradient-depth: linear-gradient(
    180deg,
    rgba(124, 58, 237, 0.08) 0%,
    rgba(8, 145, 178, 0.04) 50%,
    transparent 100%
  );

  /* Shine Effect */
  --gradient-shine: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );

  /* Holographic Border */
  --gradient-holographic: linear-gradient(
    90deg,
    #312E81 0%,
    #7C3AED 20%,
    #06B6D4 40%,
    #C4873C 60%,
    #7C3AED 80%,
    #06B6D4 100%
  );

  /* ========================================
     BORDERS
     ======================================== */

  --border-light: rgba(15, 23, 42, 0.06);
  --border-default: rgba(15, 23, 42, 0.1);
  --border-medium: rgba(15, 23, 42, 0.15);
  --border-strong: rgba(15, 23, 42, 0.2);
  --border-accent: rgba(124, 58, 237, 0.3);
  --border-accent-strong: rgba(124, 58, 237, 0.5);

  /* Border aliases */
  --border-subtle: var(--border-light);

  /* ========================================
     SHADOWS
     ======================================== */

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 16px 32px rgba(15, 23, 42, 0.12);
  --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.16);
  --shadow-3xl: 0 32px 64px rgba(15, 23, 42, 0.2);

  /* Card Shadow (3-layer stack) */
  --shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 8px rgba(15, 23, 42, 0.04),
    0 16px 32px rgba(15, 23, 42, 0.06);

  --shadow-card-hover:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 8px 16px rgba(15, 23, 42, 0.06),
    0 24px 48px rgba(15, 23, 42, 0.1);

  /* Colored Shadows */
  --shadow-primary:
    0 4px 14px rgba(124, 58, 237, 0.2),
    0 8px 32px rgba(124, 58, 237, 0.15);

  --shadow-primary-lg:
    0 8px 24px rgba(124, 58, 237, 0.25),
    0 16px 48px rgba(124, 58, 237, 0.2);

  --shadow-cyan:
    0 4px 14px rgba(6, 182, 212, 0.2),
    0 8px 32px rgba(6, 182, 212, 0.15);

  --shadow-indigo:
    0 4px 14px rgba(49, 46, 129, 0.2),
    0 8px 32px rgba(49, 46, 129, 0.15);

  --shadow-gold:
    0 4px 14px rgba(196, 135, 60, 0.3),
    0 8px 32px rgba(196, 135, 60, 0.2);

  --shadow-success:
    0 4px 14px rgba(5, 150, 105, 0.2);

  --shadow-danger:
    0 4px 14px rgba(220, 38, 38, 0.2);

  /* Glow Effects */
  --glow-primary: 0 0 60px rgba(124, 58, 237, 0.3);
  --glow-cyan: 0 0 60px rgba(6, 182, 212, 0.3);
  --glow-indigo: 0 0 60px rgba(49, 46, 129, 0.3);
  --glow-gold: 0 0 60px rgba(196, 135, 60, 0.3);
  --glow-aurora:
    0 0 40px rgba(49, 46, 129, 0.2),
    0 0 80px rgba(124, 58, 237, 0.15),
    0 0 120px rgba(6, 182, 212, 0.1);

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes - Fluid Scale */
  --text-mega: clamp(5rem, 12vw, 10rem);
  --text-hero: clamp(3.5rem, 8vw, 6rem);
  --text-display: clamp(2.5rem, 6vw, 4.5rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);
  --text-h3: clamp(1.5rem, 2.5vw, 2rem);
  --text-h4: clamp(1.25rem, 2vw, 1.5rem);
  --text-h5: 1.125rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-body-sm: 0.9375rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;
  --text-xxs: 0.6875rem;

  /* Text size aliases for responsive */
  --text-base: var(--text-body);
  --text-lg: var(--text-body-lg);
  --text-sm: var(--text-small);
  --text-xl: var(--text-h5);
  --text-2xl: var(--text-h4);
  --text-3xl: var(--text-h3);
  --text-4xl: var(--text-h2);

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Font weight aliases */
  --font-semibold: var(--weight-semibold);

  /* Line Heights */
  --leading-mega: 0.9;
  --leading-display: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ========================================
     SPACING SCALE
     ======================================== */

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;

  /* Container */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;
  --container-3xl: 1600px;
  --container-padding: clamp(1.5rem, 5vw, 4rem);

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-4xl: 2.5rem;
  --radius-full: 9999px;

  /* ========================================
     BLUR EFFECTS
     ======================================== */

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* ========================================
     TRANSITIONS & EASING
     ======================================== */

  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  --ease-elastic: cubic-bezier(0.5, 1.5, 0.8, 1);

  /* Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-400: 400ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Combined Transitions */
  --transition-fast: var(--duration-150) var(--ease-out);
  --transition-normal: var(--duration-300) var(--ease-out);
  --transition-slow: var(--duration-500) var(--ease-out);
  --transition-smooth: var(--duration-400) var(--ease-smooth);
  --transition-spring: var(--duration-500) var(--ease-spring);
  --transition-bounce: var(--duration-500) var(--ease-bounce);

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-behind: -1;
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-max: 9999;

  /* ========================================
     COMPONENT-SPECIFIC TOKENS
     ======================================== */

  /* Button */
  --btn-height-sm: 2.5rem;
  --btn-height-md: 3rem;
  --btn-height-lg: 3.5rem;
  --btn-height-xl: 4rem;

  /* Card */
  --card-padding: var(--space-6);
  --card-radius: var(--radius-2xl);
  --card-border: 1px solid var(--border-light);

  /* Input */
  --input-height: 3rem;
  --input-radius: var(--radius-xl);
  --input-border: 1.5px solid var(--border-default);

  /* Navbar */
  --navbar-height: 4.5rem;
  --navbar-blur: var(--blur-xl);

  /* Section */
  --section-padding: var(--space-24);
  --section-padding-lg: var(--space-32);
  --section-gap: var(--space-16);
}

/* ========================================
   DARK MODE OVERRIDES (for CTA section)
   ======================================== */

.dark,
[data-theme="dark"] {
  --bg-pure: var(--bg-void);
  --bg-soft: var(--bg-space);
  --bg-cloud: var(--bg-night);

  --text-primary: var(--text-light);
  --text-secondary: var(--text-light-secondary);
  --text-muted: var(--text-light-muted);

  --border-light: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.15);

  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.3);

  --glass-white: rgba(255, 255, 255, 0.05);
  --glass-white-light: rgba(255, 255, 255, 0.03);
}