/**
 * 🎨 AURORA STEPPE Design Tokens v2.0
 * 2026-ready дизайн-система с продвинутыми токенами
 */

:root {
  /* ============================================
     COLORS - Light Theme
     ============================================ */
  --bg: #F7F8FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F0F2F5;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-glass: rgba(255, 255, 255, 0.8);
  
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --text-disabled: #AEAEB2;
  --text-inverse: #FFFFFF;
  
  --border: rgba(0, 0, 0, 0.12);
  --border-hover: rgba(0, 0, 0, 0.14);
  --divider: rgba(0, 0, 0, 0.12);
  --divider-subtle: rgba(0, 0, 0, 0.06);
  
  /* Primary Colors */
  --primary: #6A7CFF;
  --primary-hover: #8B9AFF;
  --primary-light: rgba(106, 124, 255, 0.1);
  --primary-dark: #4E5EE6;
  
  /* Accent Colors */
  --accent: #12E6A6;
  --accent-hover: #2AF5B8;
  --accent-light: rgba(18, 230, 166, 0.1);
  --accent-dark: #0DCB8F;
  
  /* Semantic Colors */
  --success: #16C67A;
  --success-light: rgba(22, 198, 122, 0.1);
  --warning: #FF7A6E;
  --warning-light: rgba(255, 122, 110, 0.1);
  --error: #FF4D4D;
  --error-light: rgba(255, 77, 77, 0.1);
  --info: #6A7CFF;
  --info-light: rgba(106, 124, 255, 0.1);
  
  /* Secondary/Neutral */
  --secondary: #9AA4B2;
  --secondary-light: rgba(154, 164, 178, 0.1);
  
  /* Scenario-based Accents */
  --accent-beauty: linear-gradient(135deg, #FF6B9D 0%, #C084FC 100%);
  --accent-dental: linear-gradient(135deg, #4FD1C7 0%, #81E6D9 100%);
  --accent-ecom: linear-gradient(135deg, #84CC16 0%, #6366F1 100%);
  --accent-services: linear-gradient(135deg, #3B82F6 0%, #14B8A6 100%);
  
  /* Gradients */
  --gradient-aurora: linear-gradient(135deg, 
    rgba(106, 124, 255, 0.15) 0%, 
    rgba(18, 230, 166, 0.15) 50%, 
    rgba(106, 124, 255, 0.15) 100%);
  --gradient-primary: linear-gradient(135deg, #6A7CFF 0%, #8B5CF6 100%);
  --gradient-accent: linear-gradient(35deg, #12E6A6 0%, #6A7CFF 100%);
  --gradient-surface: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);
  
  /* ============================================
     TYPOGRAPHY (Fluid)
     ============================================ */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Fluid Typography Scale */
  --text-xs: clamp(12px, 1.5vw, 14px);
  --text-sm: clamp(14px, 1.8vw, 16px);
  --text-base: clamp(16px, 2vw, 20px);
  --text-lg: clamp(18px, 2.5vw, 24px);
  --text-xl: clamp(20px, 3vw, 32px);
  --text-2xl: clamp(24px, 3.5vw, 42px);
  --text-3xl: clamp(32px, 4vw, 60px);
  --text-4xl: clamp(40px, 5vw, 72px);
  --text-5xl: clamp(48px, 6vw, 96px);
  
  /* Headings */
  --text-h1: clamp(32px, 4vw, 60px);
  --text-h2: clamp(28px, 3.5vw, 48px);
  --text-h3: clamp(24px, 3vw, 36px);
  --text-h4: clamp(20px, 2.5vw, 28px);
  --text-h5: clamp(18px, 2vw, 24px);
  --text-h6: clamp(16px, 1.8vw, 20px);
  
  /* Font Weights */
  --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.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  /* ============================================
     SPACING (8pt Grid)
     ============================================ */
  --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;
  --space-32: 128px;
  
  /* ============================================
     RADIUS
     ============================================ */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  
  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.16);
  --shadow-2xl: 0 24px 96px rgba(0, 0, 0, 0.2);
  
  /* Glow Effects */
  --shadow-glow: 0 0 20px rgba(106, 124, 255, 0.3);
  --shadow-glow-accent: 0 0 20px rgba(18, 230, 166, 0.3);
  --shadow-glow-strong: 0 0 40px rgba(106, 124, 255, 0.5);
  --shadow-glow-accent-strong: 0 0 40px rgba(18, 230, 166, 0.5);
  
  /* ============================================
     MOTION (Tokens)
     ============================================ */
  --motion-xfast: 120ms;
  --motion-fast: 180ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --motion-xslow: 500ms;
  
  /* Easing */
  --easing-default: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ============================================
     GLASS EFFECT
     ============================================ */
  --glass-blur: blur(8px);
  --glass-blur-md: blur(12px);
  --glass-blur-lg: blur(16px);
  --glass-backdrop: blur(14px);
  --glass-opacity: 0.8;
  
  /* ============================================
     DOCK & NAVIGATION
     ============================================ */
  --dock-width: 200px;
  --dock-height: 72px;
  --dock-item-size: 64px;
  --dock-item-active: 72px;
  --dock-spacing: 10px;
  --dock-blur: blur(20px);
  
  /* ============================================
     Z-INDEX
     ============================================ */
  --z-base: 0;
  --z-dock: 100;
  --z-sticky: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  
  /* ============================================
     LAYOUT
     ============================================ */
  --container-width: 1440px;
  --container-padding: var(--space-6);
  --grid-columns: 12;
  --grid-gap: var(--space-4);
  
  /* ============================================
     NOISE & TEXTURE
     ============================================ */
  --noise-opacity: 0.02;
  --noise-opacity-hover: 0.03;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
  --bg: #0B0D12;
  --bg-secondary: #141720;
  --bg-tertiary: #1A1D29;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.12);
  --surface-glass: rgba(10, 16, 25, 0.8);
  
  --text-primary: #FFFFFF;
  --text-secondary: #9AA4B2;
  --text-tertiary: #6B7280;
  --text-disabled: #4B5563;
  --text-inverse: #1D1D1F;
  
  --border: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.14);
  --divider: rgba(255, 255, 255, 0.12);
  --divider-subtle: rgba(255, 255, 255, 0.06);
  
  --primary: #8B9AFF;
  --primary-hover: #A5B2FF;
  --primary-light: rgba(139, 154, 255, 0.2);
  --primary-dark: #6A7CFF;
  
  --accent: #2AF5B8;
  --accent-hover: #4AFFC8;
  --accent-light: rgba(42, 245, 184, 0.2);
  --accent-dark: #12E6A6;
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 24px 96px rgba(0, 0, 0, 0.8);
  
  --shadow-glow: 0 0 30px rgba(139, 154, 255, 0.4);
  --shadow-glow-accent: 0 0 30px rgba(42, 245, 184, 0.4);
  --shadow-glow-strong: 0 0 50px rgba(139, 154, 255, 0.6);
  --shadow-glow-accent-strong: 0 0 50px rgba(42, 245, 184, 0.6);
  
  --noise-opacity: 0.03;
  --noise-opacity-hover: 0.05;
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-display: swap;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: var(--bg);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* ============================================
   AURORA BACKGROUND
   ============================================ */
.aurora-bg {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
}

.aurora-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-aurora);
  background-size: 200% 200%;
  animation: aurora-float 20s ease-in-out infinite;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
  filter: blur(80px);
}

.aurora-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(106, 124, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(18, 230, 166, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
  animation: aurora-pulse 15s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

/* Noise texture */
.aurora-bg {
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
}

@keyframes aurora-float {
  0%, 100% { 
    background-position: 0% 50%;
    opacity: 0.3;
  }
  50% { 
    background-position: 100% 50%;
    opacity: 0.4;
  }
}

@keyframes aurora-pulse {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

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

/* ============================================
   CONTAINER
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}