/**
 * Resonance Body Map - Theme Variables
 * Color palette, typography, and design tokens
 */

:root {
  /* ===== BACKGROUND COLORS ===== */
  --bg-deep: #08080c;
  --bg-mid: #0d0d14;
  --bg-surface: #12121a;
  --bg-glow: rgba(60, 40, 100, 0.08);
  --bg-overlay: rgba(0, 0, 0, 0.85);
  
  /* ===== REGION COLORS (Chakra-inspired) ===== */
  --color-root: #cc3333;
  --color-root-glow: #ff4444;
  --color-sacral: #dd6600;
  --color-sacral-glow: #ff8800;
  --color-solar: #ccaa00;
  --color-solar-glow: #ffcc00;
  --color-heart: #00bb77;
  --color-heart-glow: #00ff99;
  --color-throat: #00aacc;
  --color-throat-glow: #00ddff;
  --color-thirdeye: #6655cc;
  --color-thirdeye-glow: #8877ff;
  --color-crown: #aa55dd;
  --color-crown-glow: #cc77ff;
  
  /* ===== TEXT COLORS ===== */
  --text-dim: rgba(255, 255, 255, 0.35);
  --text-mid: rgba(255, 255, 255, 0.55);
  --text-bright: rgba(255, 255, 255, 0.9);
  --text-pure: #ffffff;
  
  /* ===== UI COLORS ===== */
  --ui-border: rgba(255, 255, 255, 0.08);
  --ui-border-hover: rgba(255, 255, 255, 0.15);
  --ui-border-active: rgba(255, 255, 255, 0.25);
  --ui-surface: rgba(255, 255, 255, 0.03);
  --ui-surface-hover: rgba(255, 255, 255, 0.06);
  --ui-surface-active: rgba(255, 255, 255, 0.1);
  
  /* ===== STATUS COLORS ===== */
  --status-idle: rgba(255, 255, 255, 0.2);
  --status-listening: #00ff88;
  --status-error: #ff4455;
  
  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Quicksand', -apple-system, sans-serif;
  
  /* Font Sizes - Responsive */
  --font-title: clamp(1.1rem, 2.5vw, 1.4rem);
  --font-frequency: clamp(2.8rem, 9vw, 4.5rem);
  --font-frequency-unit: clamp(0.9rem, 2.5vw, 1.1rem);
  --font-label: clamp(0.6rem, 1.5vw, 0.75rem);
  --font-button: 0.75rem;
  --font-body-text: 0.9rem;
  --font-small: 0.7rem;
  
  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  
  /* Letter Spacing */
  --tracking-title: 0.4em;
  --tracking-label: 0.25em;
  --tracking-button: 0.15em;
  --tracking-body: 0.02em;
  
  /* ===== SPACING ===== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Safe Areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  
  /* ===== BORDERS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  
  /* ===== SHADOWS ===== */
  --shadow-glow-sm: 0 0 10px;
  --shadow-glow-md: 0 0 20px;
  --shadow-glow-lg: 0 0 40px;
  --shadow-glow-xl: 0 0 80px;
  
  /* ===== ANIMATION TIMING ===== */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-smooth: 300ms;
  --duration-slow: 500ms;
  --duration-ambient: 3000ms;
  --duration-breathing: 4000ms;
  
  /* Easing Functions */
  --ease-out-fast: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-gentle: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* ===== Z-INDEX LAYERS ===== */
  --z-bg: -1;
  --z-body: 1;
  --z-particles: 2;
  --z-ui: 10;
  --z-overlay: 100;
  --z-modal: 200;
  
  /* ===== GLOW SETTINGS ===== */
  --glow-intensity: 1;
  --glow-blur-core: 4px;
  --glow-blur-mid: 15px;
  --glow-blur-ambient: 40px;
}

/* ===== LIGHT MODE THEME ===== */
.light-theme {
  /* Background Colors - Warm cream/off-white */
  --bg-deep: #f5f2ed;
  --bg-mid: #ebe8e3;
  --bg-surface: #ffffff;
  --bg-glow: rgba(100, 80, 140, 0.12);
  --bg-overlay: rgba(255, 255, 255, 0.92);
  
  /* Region Colors - Slightly deeper for light backgrounds */
  --color-root: #b82929;
  --color-root-glow: #d44444;
  --color-sacral: #c45800;
  --color-sacral-glow: #e67300;
  --color-solar: #b39500;
  --color-solar-glow: #d4b000;
  --color-heart: #009966;
  --color-heart-glow: #00cc88;
  --color-throat: #0099bb;
  --color-throat-glow: #00bbdd;
  --color-thirdeye: #5544bb;
  --color-thirdeye-glow: #7766dd;
  --color-crown: #9944cc;
  --color-crown-glow: #bb66ee;
  
  /* Text Colors - Dark on light */
  --text-dim: rgba(20, 20, 30, 0.4);
  --text-mid: rgba(20, 20, 30, 0.65);
  --text-bright: rgba(20, 20, 30, 0.9);
  --text-pure: #1a1a24;
  
  /* UI Colors */
  --ui-border: rgba(20, 20, 30, 0.1);
  --ui-border-hover: rgba(20, 20, 30, 0.2);
  --ui-border-active: rgba(20, 20, 30, 0.3);
  --ui-surface: rgba(20, 20, 30, 0.04);
  --ui-surface-hover: rgba(20, 20, 30, 0.08);
  --ui-surface-active: rgba(20, 20, 30, 0.12);
  
  /* Status Colors */
  --status-idle: rgba(20, 20, 30, 0.25);
  --status-listening: #00cc66;
  --status-error: #dd3344;
  
  /* Shadows - softer for light mode */
  --shadow-glow-sm: 0 0 8px;
  --shadow-glow-md: 0 0 16px;
  --shadow-glow-lg: 0 0 32px;
  --shadow-glow-xl: 0 0 60px;
}

/* ===== LIGHT THEME SVG OVERRIDES ===== */
/* These use !important to override inline SVG styles */

/* Body silhouette */
.light-theme #body-outline,
.light-theme .body-outline {
  stroke: rgba(50, 40, 70, 0.3) !important;
  fill: rgba(50, 40, 70, 0.04) !important;
}

.light-theme #head {
  stroke: rgba(50, 40, 70, 0.2) !important;
}

/* Skeletal elements */
.light-theme #skeletal-layer {
  opacity: 0.6 !important;
}

.light-theme #spine {
  stroke: rgba(50, 40, 70, 0.22) !important;
}

.light-theme #vertebrae circle {
  fill: rgba(50, 40, 70, 0.18) !important;
}

.light-theme #ribcage path {
  stroke: rgba(50, 40, 70, 0.15) !important;
}

.light-theme #pelvis {
  stroke: rgba(50, 40, 70, 0.18) !important;
}

/* All organs - keep their colors but make visible on light */
.light-theme .organ-group .organ {
  stroke-opacity: 0.4;
  fill-opacity: 0.08;
}

.light-theme .organ-group path:not(.organ) {
  stroke-opacity: 0.25 !important;
}

/* Energy regions - semi-transparent ellipses */
.light-theme #energy-layer ellipse {
  stroke-opacity: 0.2 !important;
  fill-opacity: 0.06 !important;
}

/* Override all SVG elements with white/rgba(255,...) colors */
/* Body wrapper SVG - override all white strokes and fills */
.light-theme .body-wrapper svg [stroke^="rgba(255"],
.light-theme .body-wrapper svg [stroke="rgba(255,255,255,0.12)"],
.light-theme .body-wrapper svg [stroke="rgba(255,255,255,0.1)"],
.light-theme .body-wrapper svg [stroke="rgba(255,255,255,0.08)"],
.light-theme .body-wrapper svg [stroke="rgba(255,255,255,0.06)"] {
  stroke: rgba(50, 40, 70, 0.25) !important;
}

.light-theme .body-wrapper svg [fill^="rgba(255"],
.light-theme .body-wrapper svg [fill="url(#body-depth)"] {
  fill: rgba(50, 40, 70, 0.04) !important;
}

/* Labels - darker for light mode */
.light-theme .label-chakra {
  fill: rgba(40, 30, 60, 0.9) !important;
}

.light-theme .label-organ {
  fill: rgba(40, 30, 60, 0.75) !important;
}

.light-theme .label-line {
  stroke: rgba(40, 30, 60, 0.35) !important;
}

.light-theme .label-dot {
  fill: rgba(40, 30, 60, 0.5) !important;
}

/* CSS class overrides from SVG internal styles */
.light-theme .svg-stroke-light { stroke: rgba(50,40,70,0.3) !important; }
.light-theme .svg-stroke-medium { stroke: rgba(50,40,70,0.35) !important; }
.light-theme .svg-stroke-subtle { stroke: rgba(50,40,70,0.2) !important; }
.light-theme .svg-stroke-faint { stroke: rgba(50,40,70,0.22) !important; }
.light-theme .svg-fill-subtle { fill: rgba(50,40,70,0.05) !important; }
.light-theme .svg-fill-medium { fill: rgba(50,40,70,0.08) !important; }
.light-theme .svg-vertebra { fill: rgba(50,40,70,0.18) !important; }

/* Light theme ambient orbs */
.light-theme .ambient-orb {
  opacity: 0.15;
}

.light-theme .ambient-orb.orb-1 {
  background: radial-gradient(circle, rgba(150, 100, 200, 0.2), transparent 70%);
}

.light-theme .ambient-orb.orb-2 {
  background: radial-gradient(circle, rgba(100, 150, 200, 0.2), transparent 70%);
}

.light-theme .ambient-orb.orb-3 {
  background: radial-gradient(circle, rgba(150, 200, 150, 0.2), transparent 70%);
}

/* Light theme vignette - subtle warm */
.light-theme .vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 180, 160, 0.15) 100%);
}

/* Light theme overlays */
.light-theme .overlay {
  background: rgba(245, 242, 237, 0.95);
}

.light-theme .overlay-content {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Light theme buttons */
.light-theme .btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-mid);
}

.light-theme .btn:hover,
.light-theme .btn:focus {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-bright);
}

.light-theme .btn-primary.active {
  background: rgba(0, 200, 100, 0.15);
  border-color: rgba(0, 200, 100, 0.4);
}

/* Light theme frequency display */
.light-theme .frequency-display {
  color: var(--text-mid);
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  :root {
    --text-dim: rgba(255, 255, 255, 0.5);
    --text-mid: rgba(255, 255, 255, 0.7);
    --ui-border: rgba(255, 255, 255, 0.2);
  }
  
  .light-theme {
    --text-dim: rgba(0, 0, 0, 0.6);
    --text-mid: rgba(0, 0, 0, 0.8);
    --ui-border: rgba(0, 0, 0, 0.3);
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-smooth: 0ms;
    --duration-slow: 0ms;
    --duration-ambient: 0ms;
    --duration-breathing: 0ms;
  }
}


/* ===== COLOR THEME PRESETS ===== */

/* Earth Tones */
.theme-earth {
  --color-root: #8b4513;
  --color-root-glow: #a0522d;
  --color-sacral: #b8860b;
  --color-sacral-glow: #daa520;
  --color-solar: #bdb76b;
  --color-solar-glow: #eee8aa;
  --color-heart: #556b2f;
  --color-heart-glow: #6b8e23;
  --color-throat: #5f9ea0;
  --color-throat-glow: #7ec8ca;
  --color-thirdeye: #6a5acd;
  --color-thirdeye-glow: #8470ff;
  --color-crown: #8b7d6b;
  --color-crown-glow: #c4b59d;
}

/* Ocean */
.theme-ocean {
  --color-root: #1a3a4a;
  --color-root-glow: #2a5a6a;
  --color-sacral: #1e6080;
  --color-sacral-glow: #2e80a0;
  --color-solar: #2090a0;
  --color-solar-glow: #30b0c0;
  --color-heart: #20a0a0;
  --color-heart-glow: #40d0d0;
  --color-throat: #30b0d0;
  --color-throat-glow: #50d0f0;
  --color-thirdeye: #4080c0;
  --color-thirdeye-glow: #60a0e0;
  --color-crown: #6090d0;
  --color-crown-glow: #80b0f0;
}

/* Monochrome */
.theme-mono {
  --color-root: #333333;
  --color-root-glow: #555555;
  --color-sacral: #444444;
  --color-sacral-glow: #666666;
  --color-solar: #555555;
  --color-solar-glow: #888888;
  --color-heart: #666666;
  --color-heart-glow: #999999;
  --color-throat: #777777;
  --color-throat-glow: #aaaaaa;
  --color-thirdeye: #888888;
  --color-thirdeye-glow: #bbbbbb;
  --color-crown: #999999;
  --color-crown-glow: #cccccc;
}

/* Sunset */
.theme-sunset {
  --color-root: #8b0000;
  --color-root-glow: #cc2200;
  --color-sacral: #cc4400;
  --color-sacral-glow: #ff6600;
  --color-solar: #dd7700;
  --color-solar-glow: #ffaa00;
  --color-heart: #ddaa00;
  --color-heart-glow: #ffcc33;
  --color-throat: #cc6688;
  --color-throat-glow: #ee88aa;
  --color-thirdeye: #9944aa;
  --color-thirdeye-glow: #bb66cc;
  --color-crown: #663388;
  --color-crown-glow: #8855aa;
}