@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Color Palette — Light Theme (B2B Service + Soft UI) */
  --color-primary: #0077B6;
  --color-primary-bright: #00B4D8;
  --color-secondary: #023E8A;
  --color-dark: #0F172A;
  --color-black: #020617;
  --color-surface: #FFFFFF;
  --color-surface-2: #F8FAFC;
  --color-surface-3: #F1F5F9;
  --color-white: #FFFFFF;
  --color-gray-1: #0F172A;
  --color-gray-2: #64748B;
  --color-gray-3: #94A3B8;
  
  /* Glass Effect — Soft UI Evolution */
  --color-glass: rgba(0, 119, 182, 0.03);
  --color-glass-border: rgba(0, 0, 0, 0.06);
  --color-glass-border-bright: rgba(0, 119, 182, 0.2);
  
  /* Gradients */
  --gradient-main: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
  --gradient-aurora: conic-gradient(from 180deg, #023E8A, #0077B6, #00B4D8, #0077B6, #023E8A);
  --gradient-text: linear-gradient(90deg, #0077B6, #00B4D8);
  
  /* Shadows — Soft UI Evolution (multi-layer, subtle) */
  --shadow-glow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-glow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-glow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 12px 28px -5px rgba(0, 119, 182, 0.12), 0 0 0 1px var(--color-glass-border-bright);
  
  /* Border Radius — Soft UI (10px default) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Typography */
  --fs-hero: clamp(2.2rem, 6vw, 4.5rem);
  --fs-h1: clamp(1.8rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.8rem);
  --fs-body: clamp(0.95rem, 1.5vw, 1.1rem);
  --fs-small: clamp(0.85rem, 1.2vw, 0.95rem);
  --fs-tiny: clamp(0.75rem, 1vw, 0.85rem);
  
  /* Transitions */
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-notification: 1100;
  --z-tooltip: 1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0ms;
    --transition-spring: 0ms;
    --transition-fast: 0ms;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}