/* ================================================================
   VARIABLES.CSS — Master Design Tokens
   ⭐ THIS IS THE ONLY FILE YOU NEED TO EDIT FOR COLORS/FONTS
   ================================================================ */

:root {

  /* ─────────────────────────────────────────
     BASE COLORS — Winter Chill Palette
     #B8E3E9 · #93B1B5 · #4F7C82 · #0B2E33
  ───────────────────────────────────────── */
  --bg-primary:      #EEF8F9;   /* Lightest teal */
  --bg-secondary:    #D1E9EC;   /* Light teal */
  --bg-card:         #ffffff;   /* White cards */
  --bg-elevated:     #F5FBFC;   /* Near-white teal */
  --text-primary:    #0B2E33;   /* Dark teal — main text */
  --text-secondary:  #4F7C82;   /* Medium teal */
  --text-muted:      #93B1B5;   /* Muted teal */
  --border-color:    #B8E3E9;   /* Light teal border */
  --border-hover:    #93B1B5;   /* Hover border */

  /* Per-section tints */
  --tint-about:   radial-gradient(ellipse 90% 60% at 50% 100%, rgba(79,124,130,0.08) 0%, transparent 70%);
  --tint-skills:  none;
  --tint-media:   none;
  --tint-contact: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,227,233,0.25) 0%, transparent 70%);

  /* ─────────────────────────────────────────
     ACCENT — Teal family
  ───────────────────────────────────────── */
  --accent:          #4F7C82;   /* Primary teal */
  --accent-dark:     #0B2E33;   /* Dark teal */
  --accent-light:    #93B1B5;   /* Light teal */
  --accent-glow:     rgba(79, 124, 130, 0.18);
  --accent-glow-lg:  rgba(79, 124, 130, 0.32);

  --accent2:         #B8E3E9;   /* Aqua light */
  --accent2-glow:    rgba(184, 227, 233, 0.4);

  --accent3:         #93B1B5;   /* Slate teal */
  --accent3-glow:    rgba(147, 177, 181, 0.25);

  --accent4:         #0B2E33;   /* Dark teal (used for dark sections) */
  --accent4-glow:    rgba(11, 46, 51, 0.12);

  /* ─────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────── */
  --font-display:  'Space Grotesk', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --fs-hero:    clamp(3.5rem, 10vw, 9rem);
  --fs-h1:      clamp(2.5rem, 6vw, 5rem);
  --fs-h2:      clamp(1.8rem, 4vw, 3.2rem);
  --fs-h3:      clamp(1.2rem, 2.5vw, 1.8rem);
  --fs-body:    clamp(1rem, 1.5vw, 1.1rem);
  --fs-small:   0.875rem;
  --fs-label:   0.72rem;

  /* ─────────────────────────────────────────
     SPACING & LAYOUT
  ───────────────────────────────────────── */
  --nav-height:      76px;
  --section-pad:     clamp(80px, 12vw, 160px);
  --container-max:   1360px;
  --container-pad:   clamp(20px, 5vw, 80px);
  --border-radius:   10px;
  --border-radius-lg:20px;

  /* ─────────────────────────────────────────
     ANIMATIONS
  ───────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   0.25s;
  --duration-mid:    0.5s;
  --duration-slow:   1s;
  --duration-xslow:  1.8s;

  /* ─────────────────────────────────────────
     SHADOWS & EFFECTS
  ───────────────────────────────────────── */
  --shadow-sm:     0 2px 8px  rgba(11,46,51,0.08);
  --shadow-md:     0 8px 32px rgba(11,46,51,0.12);
  --shadow-lg:     0 24px 64px rgba(11,46,51,0.18);
  --shadow-accent: 0 0 40px var(--accent-glow-lg);
  --shadow-gold:   0 4px 24px rgba(79,124,130,0.18);
  --section-glow-warm: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(184,227,233,0.15) 0%, transparent 70%);

  /* ─────────────────────────────────────────
     Z-INDEX LAYERS
  ───────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       1;
  --z-above:     10;
  --z-nav:      100;
  --z-cursor:  9999999;
  --z-loader:  1000;
  --z-modal:    900;
}

/* ─────────────────────────────────────────
   DARK MODE — #424549 base
───────────────────────────────────────── */
body.dark-mode,
html.dark-mode-preload body {
  --bg-primary:      #36393f;
  --bg-secondary:    #2f3136;
  --bg-card:         #40444b;
  --bg-elevated:     #4a4e57;
  --text-primary:    #dcddde;
  --text-secondary:  #b9bbbe;
  --text-muted:      #72767d;
  --border-color:    #4f545c;
  --border-hover:    #72767d;
  --accent:          #4F7C82;
  --accent-dark:     #0B2E33;
  --accent-light:    #93B1B5;
  --accent-glow:     rgba(79, 124, 130, 0.25);
  --accent-glow-lg:  rgba(79, 124, 130, 0.4);
  --tint-about:   radial-gradient(ellipse 90% 60% at 50% 100%, rgba(79,124,130,0.12) 0%, transparent 70%);
  --tint-contact: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(79,124,130,0.12) 0%, transparent 70%);
}

body.dark-mode .hero-sticky-bg,
html.dark-mode-preload body .hero-sticky-bg {
  background: linear-gradient(160deg, #2f3136 0%, #36393f 55%, #40444b 100%);
}

body.dark-mode #loader,
html.dark-mode-preload body #loader {
  background: #36393f;
}

body.dark-mode #nav.is-scrolled {
  background: rgba(47, 49, 54, 0.92);
  border-bottom-color: rgba(79,124,130,0.3);
}

body.dark-mode .contact-card {
  background: var(--bg-card);
}

body.dark-mode .chat-window {
  background: var(--bg-card);
  border-color: var(--border-color);
}