:root {
  --bg-canvas: #EEF1F6;
  --bg-canvas-dark: #0E0E18;
  --brand-blue: #322F87;
  --brand-blue-hover: #25226A;
  --accent-coral: #E05D5F;
  --accent-coral-hover: #D04B4D;
  --accent-coral-glow: rgba(224, 93, 95, 0.35);
  --shadow-dark: rgba(163, 177, 198, 0.6);
  --shadow-light: rgba(255, 255, 255, 0.85);
  --text-primary: #2E3A59;
  --text-muted: #6C757D;
  --border-subtle: rgba(255, 255, 255, 0.3);
}

/* Dark Theme Overrides */
body.dark-theme {
  --bg-canvas: #0F172A;
  --shadow-dark: rgba(2, 6, 23, 0.85);
  --shadow-light: rgba(30, 41, 59, 0.5);
  --text-primary: #F8FAFC;
  --text-muted: #94A3B8;
  --brand-blue: #818CF8;
  --brand-blue-hover: #A5B4FC;
  --border-subtle: rgba(255, 255, 255, 0.08);
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Raised Neumorphic Cards & Surface Panels */
.neu-raised {
  background: var(--bg-canvas);
  border-radius: 18px;
  box-shadow: 8px 8px 16px var(--shadow-dark), 
              -8px -8px 16px var(--shadow-light);
  border: 1px solid var(--border-subtle);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-raised:hover {
  transform: translateY(-4px);
  box-shadow: 12px 12px 24px var(--shadow-dark), 
              -12px -12px 24px var(--shadow-light);
}

/* Inset Neumorphic Forms & Input Fields */
.neu-inset {
  background: var(--bg-canvas);
  border-radius: 12px;
  box-shadow: inset 4px 4px 8px var(--shadow-dark), 
              inset -4px -4px 8px var(--shadow-light);
  border: none;
  outline: none;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 15px;
  transition: box-shadow 0.25s ease;
}

.neu-inset:focus {
  box-shadow: inset 6px 6px 10px var(--shadow-dark), 
              inset -6px -6px 10px var(--shadow-light),
              0 0 0 2px var(--brand-blue);
}

/* Buttons & Pill CTAs */
.neu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.neu-btn-coral {
  background: var(--accent-coral);
  color: #FFFFFF !important;
  box-shadow: 4px 4px 14px var(--accent-coral-glow), 
              -4px -4px 14px var(--shadow-light);
}

.neu-btn-coral:hover {
  background: var(--accent-coral-hover);
  transform: translateY(-2px);
  box-shadow: 6px 6px 18px var(--accent-coral-glow), 
              -6px -6px 18px var(--shadow-light);
}

.neu-btn-blue {
  background: var(--brand-blue);
  color: #FFFFFF !important;
  box-shadow: 4px 4px 14px rgba(50, 47, 135, 0.3), 
              -4px -4px 14px var(--shadow-light);
}

.neu-btn-blue:hover {
  background: var(--brand-blue-hover);
  transform: translateY(-2px);
}

.neu-btn-outline {
  background: var(--bg-canvas);
  color: var(--brand-blue) !important;
  box-shadow: 4px 4px 10px var(--shadow-dark), 
              -4px -4px 10px var(--shadow-light);
}

.neu-btn-outline:hover {
  box-shadow: inset 3px 3px 6px var(--shadow-dark), 
              inset -3px -3px 6px var(--shadow-light);
}

/* Neumorphic Circle Badges & Icons */
.neu-circle-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--bg-canvas);
  box-shadow: 4px 4px 10px var(--shadow-dark), 
              -4px -4px 10px var(--shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  font-size: 22px;
}