/* ═══════════════════════════════════════════════════════════════
   CLIMA INTEGRAL — Variables CSS (Design Tokens)
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Light Mode ──────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:           #f0f9ff;
  --color-bg-alt:       #e0f2fe;
  --color-surface:      #ffffff;
  --color-surface-alt:  rgba(255, 255, 255, 0.7);
  --color-border:       rgba(14, 165, 233, 0.15);
  --color-text:         #0c1a2e;
  --color-text-muted:   #4b6a8a;
  --color-text-inv:     #ffffff;

  /* Brand */
  --color-primary:      #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-secondary:    #06b6d4;
  --color-accent:       #8b5cf6;
  --color-warm:         #f59e0b;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #3b82f6 100%);
  --grad-hero:    linear-gradient(160deg, rgba(14,165,233,0.12) 0%, rgba(6,182,212,0.08) 50%, rgba(139,92,246,0.10) 100%);
  --grad-card:    linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,249,255,0.8) 100%);
  --grad-text:    linear-gradient(135deg, #0ea5e9, #06b6d4, #8b5cf6);

  /* Glass */
  --glass-bg:     rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-blur:   blur(20px);

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(14,165,233,0.08);
  --shadow-md:    0 8px 32px rgba(14,165,233,0.15);
  --shadow-lg:    0 24px 64px rgba(14,165,233,0.20);
  --shadow-glow:  0 0 40px rgba(14,165,233,0.30);
  --shadow-card:  0 4px 24px rgba(12,26,46,0.08);

  /* Navbar */
  --nav-bg:       rgba(240, 249, 255, 0.85);
  --nav-border:   rgba(14, 165, 233, 0.15);

  /* Typography */
  --font-family:  'Outfit', system-ui, -apple-system, sans-serif;
  --font-size-xs: clamp(0.75rem,  1.5vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 1.8vw, 1rem);
  --font-size-md: clamp(1rem,     2vw,   1.125rem);
  --font-size-lg: clamp(1.125rem, 2.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem,   3.5vw, 2.25rem);
  --font-size-2xl:clamp(2rem,     5vw,   3.5rem);
  --font-size-3xl:clamp(2.5rem,   7vw,   5rem);

  /* Spacing */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  10rem;

  /* Layout */
  --container-max: 1280px;
  --nav-height:    72px;
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     40px;
  --radius-full:   9999px;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index scale */
  --z-base:    1;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-nav:     200;
  --z-float:   300;
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:           #080e1a;
  --color-bg-alt:       #0c1525;
  --color-surface:      #101c30;
  --color-surface-alt:  rgba(16, 28, 48, 0.8);
  --color-border:       rgba(6, 182, 212, 0.15);
  --color-text:         #e2f0ff;
  --color-text-muted:   #7aa5c5;
  --color-text-inv:     #080e1a;

  --grad-hero:    linear-gradient(160deg, rgba(14,165,233,0.08) 0%, rgba(6,182,212,0.05) 50%, rgba(139,92,246,0.08) 100%);
  --grad-card:    linear-gradient(135deg, rgba(16,28,48,0.95) 0%, rgba(8,14,26,0.90) 100%);

  --glass-bg:     rgba(16, 28, 48, 0.7);
  --glass-border: rgba(6, 182, 212, 0.15);

  --shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:    0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:    0 24px 64px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 60px rgba(6,182,212,0.20);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.3);

  --nav-bg:       rgba(8, 14, 26, 0.85);
  --nav-border:   rgba(6, 182, 212, 0.12);
}