/**
 * MetaformaX.Web Design Tokens
 * Three-tier token architecture for theming and consistency
 * Updated with MetaformaX Brand Colors (Purple-Blue Gradient + Gold Accents)
 *
 * Tier 1: Primitives (raw values)
 * Tier 2: Semantic (theme-aware)
 * Tier 3: Component (specific uses)
 */

/* ==========================================================================
   TIER 1: PRIMITIVE TOKENS
   ========================================================================== */

:root {
  /* ==========================================================================
     METAFORMAX BRAND COLORS
     Primary Gradient: Deep Purple (#4A148C) → Vibrant Blue (#0D47A1)
     Gold Accents: #FFC107 (primary), #FFB300 (secondary)
     ========================================================================== */

  /* Brand Purple Scale */
  --purple-50: #F3E5F5;
  --purple-100: #E1BEE7;
  --purple-200: #CE93D8;
  --purple-300: #BA68C8;
  --purple-400: #AB47BC;
  --purple-500: #9C27B0;
  --purple-600: #8E24AA;
  --purple-700: #7B1FA2;
  --purple-800: #6A1B9A;
  --purple-900: #4A148C;
  --purple-950: #311B92;

  /* Brand Blue Scale */
  --blue-50: #E3F2FD;
  --blue-100: #BBDEFB;
  --blue-200: #90CAF9;
  --blue-300: #64B5F6;
  --blue-400: #42A5F5;
  --blue-500: #2196F3;
  --blue-600: #1E88E5;
  --blue-700: #1976D2;
  --blue-800: #1565C0;
  --blue-900: #0D47A1;
  --blue-950: #0A3D91;

  /* Brand Gold Scale (Primary Accent) */
  --gold-50: #FFF8E1;
  --gold-100: #FFECB3;
  --gold-200: #FFE082;
  --gold-300: #FFD54F;
  --gold-400: #FFCA28;
  --gold-500: #FFC107;
  --gold-600: #FFB300;
  --gold-700: #FFA000;
  --gold-800: #FF8F00;
  --gold-900: #FF6F00;

  /* Neutral Gray Scale */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* System Colors */
  --red-50: #FEF2F2;
  --red-100: #FEE2E2;
  --red-500: #EF4444;
  --red-600: #DC2626;

  --emerald-50: #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-500: #10B981;
  --emerald-600: #059669;

  /* Spacing Primitives (4px base unit) */
  --space-0: 0;
  --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;

  /* ==========================================================================
     TYPOGRAPHY - MetaformaX Brand Fonts
     Modern Sans-Serif with Dynamic Italic Variants
     ========================================================================== */

  /* Primary Font: Plus Jakarta Sans (modern, geometric, highly legible) */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Accent Font: Poppins (bold headlines, matches logo's bold sans-serif style) */
  --font-display: 'Poppins', var(--font-sans);

  /* Monospace Font: JetBrains Mono (code, technical content) */
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* Shadow Primitives */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Radius Primitives */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ==========================================================================
   TIER 2: SEMANTIC TOKENS
   ========================================================================== */

:root {
  /* ==========================================================================
     METAFORMAX BRAND GRADIENTS
     ========================================================================== */

  /* Primary Brand Gradient (Purple → Blue) */
  --gradient-brand: linear-gradient(135deg, var(--purple-900) 0%, var(--blue-900) 100%);
  --gradient-brand-light: linear-gradient(135deg, var(--purple-700) 0%, var(--blue-700) 100%);
  --gradient-brand-subtle: linear-gradient(135deg, var(--purple-100) 0%, var(--blue-100) 100%);

  /* Gold Gradient */
  --gradient-gold: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-700) 100%);
  --gradient-gold-subtle: linear-gradient(135deg, var(--gold-100) 0%, var(--gold-300) 100%);

  /* Semantic Colors - Light Theme */
  --color-background: var(--slate-50);
  --color-background-elevated: #FFFFFF;
  --color-background-subtle: var(--slate-100);
  --color-background-accent: var(--purple-50);

  /* Text Colors */
  --color-text-primary: var(--slate-900);
  --color-text-secondary: var(--slate-700);
  --color-text-muted: var(--slate-500);
  --color-text-inverse: #FFFFFF;

  /* ==========================================================================
     METAFORMAX PRIMARY COLORS (Purple-Blue + Gold)
     ========================================================================== */

  /* Primary Brand Color: Purple-Blue Blend */
  --color-primary: var(--purple-700);
  --color-primary-hover: var(--purple-800);
  --color-primary-active: var(--purple-900);
  --color-primary-subtle: var(--purple-50);

  /* Primary Blue (for CTAs, highlights) */
  --color-primary-blue: var(--blue-700);
  --color-primary-blue-hover: var(--blue-800);

  /* ==========================================================================
     METAFORMAX SECONDARY COLORS (Gold Accents)
     ========================================================================== */

  /* Secondary Brand Color: Gold */
  --color-secondary: var(--gold-500);
  --color-secondary-hover: var(--gold-600);
  --color-secondary-subtle: var(--gold-100);

  /* Accent Colors */
  --color-accent: var(--gold-400);
  --color-accent-hover: var(--gold-500);

  /* Light Blue Accent (for hover states, interactive elements) */
  --color-accent-blue: var(--blue-300);
  --color-accent-blue-hover: var(--blue-400);

  /* Border Colors */
  --color-border: var(--slate-200);
  --color-border-subtle: rgba(226, 232, 240, 0.6);
  --color-border-strong: var(--slate-300);

  /* Gold Border (for premium feel) */
  --color-border-gold: var(--gold-300);

  /* System Colors */
  --color-error: var(--red-600);
  --color-error-subtle: var(--red-50);
  --color-warning: var(--gold-600);
  --color-warning-subtle: var(--gold-50);
  --color-success: var(--emerald-600);
  --color-success-subtle: var(--emerald-50);

  /* Semantic Spacing */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);
  --spacing-3xl: var(--space-16);

  /* Layout Spacing */
  --spacing-container-padding: var(--space-4);
  --spacing-section-gap: var(--space-12);
  --spacing-component-gap: var(--space-6);

  /* Semantic Typography */
  --font-family-base: var(--font-sans);
  --font-family-display: var(--font-display);

  /* Semantic Shadows */
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-popover: var(--shadow-xl);
  --shadow-modal: var(--shadow-2xl);

  /* ==========================================================================
     METAFORMAX COLORED SHADOWS
     ========================================================================== */

  /* Purple Shadows (Primary) */
  --shadow-primary: 0 10px 15px -3px rgb(74 20 140 / 0.25), 0 4px 6px -4px rgb(74 20 140 / 0.1);
  --shadow-primary-lg: 0 20px 25px -5px rgb(74 20 140 / 0.3), 0 8px 10px -6px rgb(74 20 140 / 0.2);

  /* Gold Shadows (Secondary/Premium) */
  --shadow-secondary: 0 10px 15px -3px rgb(255 193 7 / 0.25);
  --shadow-secondary-lg: 0 20px 25px -5px rgb(255 193 7 / 0.3);

  /* Blue Shadows (Accent) */
  --shadow-blue: 0 10px 15px -3px rgb(13 71 161 / 0.25);

  /* Semantic Border Radius */
  --radius-component: var(--radius-lg);
  --radius-card: var(--radius-xl);
  --radius-button: var(--radius-full);
  --radius-input: var(--radius-lg);

  /* Animation Timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp: cubic-bezier(0.2, 0, 0.1, 1);

  /* Animation Durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  /* Transition Presets */
  --transition-default: all var(--duration-normal) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-colors: background-color var(--duration-normal) var(--ease-out),
                       color var(--duration-normal) var(--ease-out),
                       border-color var(--duration-normal) var(--ease-out);
}

/* ==========================================================================
   DARK THEME - MetaformaX Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  /* Background Colors */
  --color-background: var(--slate-950);
  --color-background-elevated: var(--slate-900);
  --color-background-subtle: var(--slate-800);
  --color-background-accent: rgba(74, 20, 140, 0.15);

  /* Text Colors */
  --color-text-primary: var(--slate-50);
  --color-text-secondary: var(--slate-300);
  --color-text-muted: var(--slate-400);
  --color-text-inverse: var(--slate-950);

  /* Primary Colors (lighter for dark mode) */
  --color-primary: var(--purple-500);
  --color-primary-hover: var(--purple-400);
  --color-primary-active: var(--purple-600);
  --color-primary-subtle: rgba(156, 39, 174, 0.15);

  /* Secondary Colors */
  --color-secondary: var(--gold-400);
  --color-secondary-hover: var(--gold-500);
  --color-secondary-subtle: rgba(255, 193, 7, 0.15);

  /* Border Colors */
  --color-border: var(--slate-700);
  --color-border-subtle: var(--slate-800);
  --color-border-strong: var(--slate-600);
  --color-border-gold: rgba(255, 193, 7, 0.3);

  /* Gradients (inverted for dark mode) */
  --gradient-brand: linear-gradient(135deg, var(--blue-900) 0%, var(--purple-900) 100%);
  --gradient-brand-light: linear-gradient(135deg, var(--blue-700) 0%, var(--purple-700) 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(13, 71, 161, 0.15) 0%, rgba(74, 20, 140, 0.15) 100%);

  /* Shadows (enhanced for dark mode) */
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.3);
  --shadow-primary: 0 10px 15px -3px rgb(156, 39, 174 / 0.3);
}

/* ==========================================================================
   TIER 3: COMPONENT TOKENS
   ========================================================================== */

:root {
  /* ==========================================================================
     BUTTON TOKENS - MetaformaX Brand
     ========================================================================== */

  /* Primary Button (Purple-Blue Gradient) */
  --button-primary-bg: var(--gradient-brand);
  --button-primary-bg-hover: var(--gradient-brand-light);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-padding-x: var(--spacing-lg);
  --button-primary-padding-y: var(--spacing-sm);
  --button-primary-radius: var(--radius-button);
  --button-primary-shadow: var(--shadow-primary);

  /* Secondary Button (Gold) */
  --button-secondary-bg: var(--color-secondary);
  --button-secondary-bg-hover: var(--color-secondary-hover);
  --button-secondary-text: var(--slate-900);

  /* Ghost Button */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--color-background-subtle);
  --button-ghost-text: var(--color-primary);

  /* Button Sizes */
  --button-sm-min-height: 36px;
  --button-md-min-height: 44px;
  --button-lg-min-height: 52px;

  /* ==========================================================================
     CARD TOKENS
     ========================================================================== */

  --card-bg: var(--color-background-elevated);
  --card-border: var(--color-border-subtle);
  --card-radius: var(--radius-card);
  --card-padding: var(--spacing-xl);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  /* ==========================================================================
     PRICING CARD TOKENS - MetaformaX Premium Feel
     ========================================================================== */

  --pricing-card-bg: var(--color-background-elevated);
  --pricing-card-border: var(--color-border-subtle);
  --pricing-card-popular-border: var(--color-secondary);
  --pricing-card-popular-shadow: 0 0 0 2px var(--color-secondary-subtle), var(--shadow-secondary-lg);
  --pricing-card-radius: var(--radius-2xl);

  /* ==========================================================================
     INPUT TOKENS
     ========================================================================== */

  --input-bg: var(--color-background-elevated);
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);
  --input-radius: var(--radius-input);
  --input-padding: var(--spacing-md);

  /* ==========================================================================
     NAVIGATION TOKENS
     ========================================================================== */

  --nav-height: 5rem;
  --nav-bg: rgba(255, 255, 255, 0.7);
  --nav-border: rgba(255, 255, 255, 0.5);
  --nav-blur: blur(16px) saturate(180%);
}

/* ==========================================================================
   TYPOGRAPHY SCALE - MetaformaX Brand
   ========================================================================== */

:root {
  /* Responsive Font Sizes (clamp-based) */
  --font-size-base: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --font-size-2xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --font-size-3xl: clamp(2.5rem, 2.0rem + 2.5vw, 3.5rem);
  --font-size-4xl: clamp(3.5rem, 2.5rem + 5vw, 5rem);

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  --line-height-loose: 2;
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-container-padding);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding: 0 var(--spacing-lg);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding: 0 var(--spacing-xl);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Focus Visible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   METAFORMAX BRAND ANIMATIONS
   ========================================================================== */

/* Purple Glow Pulse Animation */
@keyframes pulse-purple {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 20, 140, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(74, 20, 140, 0);
  }
}

/* Gold Shine Animation */
@keyframes gold-shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Gradient Border Animation */
@keyframes gradient-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating Gold Particles */
@keyframes float-gold {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.8;
  }
}

/* Purple Ripple Effect */
@keyframes purple-ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Gold Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Brand Gradient Fade */
@keyframes gradient-fade {
  0% {
    background-position: 0% 50%;
    opacity: 0.8;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.8;
  }
}

/* Purple Pulse Ring */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Animation Classes */
.animate-fade-up {
  animation: fadeUp var(--duration-slow) var(--ease-out);
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-bounce);
}

.animate-slide-down {
  animation: slideDown var(--duration-normal) var(--ease-out);
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-reverse {
  animation: float 6s ease-in-out infinite reverse;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   METAFORMAX BRAND UTILITIES
   ========================================================================== */

/* Gradient Text */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold Border */
.border-gold {
  border-color: var(--color-border-gold);
}

/* Premium Card (with gold accent) */
.card-premium {
  border: 2px solid var(--color-border-gold);
  box-shadow: var(--shadow-secondary);
}

/* ==========================================================================
   END OF DESIGN TOKENS
   ========================================================================== */