/* =============================================================================
   AqarSwap Design Tokens & Light Spatial Glassmorphism Variables
   Unified Cairo Typography (VisionOS Light Mode)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Spatial Canvas & Light Space Palette */
  --bg-deep: #f8fafc;
  --bg-space: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;

  /* VisionOS Luminous Glass Plane Materials */
  --glass-surface-subtle: rgba(255, 255, 255, 0.6);
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-surface-hover: rgba(255, 255, 255, 0.92);
  --glass-surface-active: rgba(255, 255, 255, 0.98);
  --glass-dock-bg: rgba(255, 255, 255, 0.85);

  /* Specular Rims & Dynamic Subtle Borders */
  --border-glass: rgba(226, 232, 240, 0.85);
  --border-glass-specular: rgba(255, 255, 255, 0.95);
  --border-glass-bright: rgba(2, 132, 199, 0.4);

  /* Brand Accents & Status Indicators (Light Mode Optimized) */
  --color-mint: #059669;
  --color-mint-dark: #047857;
  --color-mint-glow: rgba(5, 150, 105, 0.18);

  --color-cyan: #0284c7;
  --color-cyan-dark: #0369a1;
  --color-cyan-glow: rgba(2, 132, 199, 0.18);

  --color-amber: #d97706;
  --color-amber-glow: rgba(217, 119, 6, 0.18);

  --color-crimson: #dc2626;
  --color-crimson-glow: rgba(220, 38, 38, 0.18);

  /* Typography Text Tokens */
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --text-inverted: #ffffff;

  /* Unified Font Families: 100% Cairo Sans Everywhere */
  --font-sans: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Spatial Elevation Drop Shadows */
  --shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.04);
  --shadow-glass: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.7);
  --shadow-floating: 0 20px 40px -10px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 24px rgba(2, 132, 199, 0.07);
  --shadow-dock: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 25px rgba(5, 150, 105, 0.12);

  /* Optical Filter Blurs */
  --blur-glass: blur(24px) saturate(180%);
  --blur-dock: blur(28px) saturate(190%);
  --blur-subtle: blur(12px);

  /* Micro-Motion & Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms var(--ease-spring);
  --transition-normal: 300ms var(--ease-spring);
  --transition-smooth: 450ms var(--ease-spring);

  /* Layout Spacing & Vertical Rhythm */
  --nav-height: 64px;
  --nav-offset: 110px;
}