/* ============================================
   THEME.CSS — Light & Dark Mode Variables
   Speech Therapy Practice Website
   ============================================ */

/* ── Light Mode (default) ── */
:root,
[data-theme="light"] {
  --color-bg: #FDFAF6;
  --color-bg-alt: #F5F0E8;
  --color-bg-card: #FFFFFF;
  --color-bg-nav: rgba(253, 250, 246, 0.95);

  --color-primary: #4A90D9;
  --color-primary-dark: #2E6DB4;
  --color-primary-light: #A8CDEF;

  --color-accent: #F4845F;
  --color-accent-dark: #D4613C;
  --color-accent-light: #FAC0AC;

  --color-teal: #3BBFA0;
  --color-teal-dark: #2A9980;
  --color-teal-light: #9EDED0;

  --color-yellow: #F9C846;
  --color-yellow-dark: #D4A020;
  --color-yellow-light: #FDE9A2;

  --color-text: #2C2C3E;
  --color-text-muted: #151616;
  --color-text-light: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  --color-border: #E5E0D8;
  --color-border-light: #F0ECE4;

  --color-shadow: rgba(74, 144, 217, 0.12);
  --color-shadow-dark: rgba(44, 44, 62, 0.15);

  --color-success: #52C97A;
  --color-warning: #F9C846;
  --color-error: #F47B7B;

  --gradient-primary: linear-gradient(135deg, #4A90D9 0%, #3BBFA0 100%);
  --gradient-accent: linear-gradient(135deg, #F4845F 0%, #F9C846 100%);
  --gradient-hero: linear-gradient(160deg, #EEF6FF 0%, #E8F8F4 50%, #FEF6EC 100%);
  --gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F9F6F0 100%);

  --nav-height: 72px;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 40px;
  --border-radius-full: 9999px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  --font-display: 'Nunito', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 4px 20px var(--color-shadow-dark);
  --shadow-lg: 0 8px 40px rgba(44, 44, 62, 0.12);
  --shadow-xl: 0 16px 60px rgba(44, 44, 62, 0.16);

  /* Footer Colors */
  --footer-bg: #FFFFFF;
  --footer-text: #2C2C3E;
  --footer-bottom-bg: #F5F0E8;
  --footer-links-color: #6B7280;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-bg: #12131C;
  --color-bg-alt: #1A1B28;
  --color-bg-card: #21233A;
  --color-bg-nav: rgba(18, 19, 28, 0.97);

  --color-primary: #5AA8F0;
  --color-primary-dark: #3D8DD4;
  --color-primary-light: #2A4A7A;

  --color-accent: #FF9A7A;
  --color-accent-dark: #E07050;
  --color-accent-light: #5A2A1A;

  --color-teal: #4ECFB0;
  --color-teal-dark: #35A88E;
  --color-teal-light: #1A4A3A;

  --color-yellow: #FFD666;
  --color-yellow-dark: #D4A820;
  --color-yellow-light: #4A3A10;

  --color-text: #E8E9F0;
  --color-text-muted: #e2e5ee;
  --color-text-light: #6B7280;
  --color-text-inverse: #12131C;

  --color-border: #2E3050;
  --color-border-light: #252740;

  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-dark: rgba(0, 0, 0, 0.5);

  --color-success: #5AD487;
  --color-warning: #FFD666;
  --color-error: #FF8080;

  --gradient-primary: linear-gradient(135deg, #5AA8F0 0%, #4ECFB0 100%);
  --gradient-accent: linear-gradient(135deg, #FF9A7A 0%, #FFD666 100%);
  --gradient-hero: linear-gradient(160deg, #161826 0%, #121F2A 50%, #1C1620 100%);
  --gradient-card: linear-gradient(145deg, #21233A 0%, #1E2035 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.6);

  /* Footer Colors - Dark Mode */
  --footer-bg: #0E0F17;
  --footer-text: #E8E9F0;
  --footer-bottom-bg: #07080D;
  --footer-links-color: #9DA3B4;
}

/* ── Theme Toggle Button ── */
.theme-toggle {
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  width: 52px;
  height: 28px;
  position: relative;
  transition: background var(--transition-base), border-color var(--transition-base);
  flex-shrink: 0;
}

.theme-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  transition: transform var(--transition-base), background var(--transition-base);
}

[data-theme="dark"] .theme-toggle::after {
  transform: translateX(24px);
  background: var(--color-yellow);
}

.theme-toggle-icon {
  display: none;
}

/* ── Smooth Theme Transitions ── */
*,
*::before,
*::after {
  transition: background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

/* exclude transform/opacity from theme transitions to keep animations clean */
.animate-in,
.hero-badge,
.service-card,
.testimonial-card,
.stat-number {
  transition: transform var(--transition-base),
    opacity var(--transition-base),
    box-shadow var(--transition-base);
}