/* ============================================================
 * Macrition surface depth layer
 * ============================================================
 *
 * Refines the surface hierarchy: calmer borders, softer elevation, and
 *
 * 0. CRITICAL: Hero empty-space bug fix (orbs pushing content down 1024px)
 * 1. Surface elevation ramp, cards were invisible (1.01:1 contrast with bg)
 * 2. Calculator results, feel like an accomplishment (huge serif hero number)
 * 3. Button press depth, tactile:active sink + success pulse
 * 4. Pricing card differentiation, highlighted card visually dominates
 * 5. Ambient color pools, warm/cool/natural ambient backgrounds
 * 6. Newsletter CTA, soft warm ambient pool instead of loud blue→green
 * 7. Per-goal visual identity, gradient overlays for goal cards
 * 8. Focus ring polish, visible, accessible, consistent
 * 9. Card hover lift, subtle but visible elevation change
 * 10. Section depth, alternating warm/cool section backgrounds
 *
 * Loaded AFTER design-system.css AND natural-depth.css.
 * ============================================================ */

/* ============================================================
 * 0. CRITICAL FIX, Hero empty-space bug
 * ============================================================
 * natural-depth.css has `section.hero > * { position: relative; }`
 * which overrides the `position: absolute` on.ambient-orb and
 *.hero-bg. This causes the 3 ambient orbs (320px each) to take
 * up 960px of vertical flow space, pushing the hero content down
 * by ~1024px, making the hero appear EMPTY above the fold.
 *
 * This override restores absolute positioning for decorative
 * background elements so they don't affect document flow.
 * ============================================================ */
.hero .ambient-orb,
.hero .ambient-mesh,
.hero .hero-bg,
section.hero > .ambient-orb,
section.hero > .ambient-mesh,
section.hero > .hero-bg,
.hero-section > .ambient-orb,
.hero-section > .ambient-mesh,
.hero-section > .hero-bg {
  position: absolute !important;
}

/* ============================================================
 * 1. SURFACE ELEVATION RAMP, fix invisible cards
 * ============================================================
 * The audit found --surface #FFFFFF on --bg #F8FAFC = 1.01:1 luminance.
 * Cards were literally invisible. We add a proper elevation ramp with
 * visible borders + shadows so cards "lift" off the background.
 * ============================================================ */
:root {
  --surface-0: var(--bg);
  --surface-raised: var(--surface);
  --surface-overlay: #FFFFFF;
  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-strong: rgba(15, 23, 42, 0.10);
  --shadow-raised:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 8px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.03);
  --shadow-overlay:
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 8px 32px rgba(15, 23, 42, 0.06),
    0 24px 64px rgba(15, 23, 42, 0.04);
  --lift: translateY(-2px);
  --press: translateY(1px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 220ms;
}

[data-theme="dark"] {
  --surface-0: var(--bg);
  --surface-raised: var(--surface);
  --surface-overlay: #1E293B;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-raised:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-overlay:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 24px 64px rgba(0, 0, 0, 0.2);
}

/* Make cards visibly elevated */
.calc-widget,
.dash-card,
.glass-surface,
.pricing-card,
.blog-card,
.calc-card,
.feature-card,
.goal-card,
.metric-card,
.admin-card,
.msg-card,
.sec-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-raised) !important;
  transition:
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease) !important;
}

/* Hover lift for interactive cards */
.calc-card[href]:hover,
.blog-card[href]:hover,
.feature-card[href]:hover,
.goal-card[href]:hover,
.calc-widget.hover-lift:hover,
.dash-card.glass-surface-hover:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-overlay) !important;
  border-color: var(--border-strong) !important;
}

/* ============================================================
 * 2. CALCULATOR RESULTS, feel like an accomplishment
 * ============================================================
 * Audit: "results should feel like an accomplishment with a huge
 * serif primary number". Currently 4 equal-sized boxes.
 * ============================================================ */
.calc-result-hero,
.result-hero {
  text-align: center;
  padding: 48px 24px 32px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 70%),
    var(--surface-raised) !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-raised) !important;
  margin-bottom: 24px;
}

.calc-result-hero .result-number,
.result-hero .result-value,
.result-hero .big-number {
  font-family: 'Noto Serif SC', Georgia, 'Times New Roman', serif !important;
  font-size: clamp(56px, 8vw, 96px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color:var(--primary-text) !important;
  display: block;
  margin: 8px 0 !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent, #6366F1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calc-result-hero .result-label,
.result-hero .result-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted, #64748B) !important;
  margin-bottom: 4px !important;
}

.calc-result-hero .result-category,
.result-hero .result-category {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-2, #334155) !important;
  margin-top: 8px !important;
}

[data-theme="dark"] .calc-result-hero,
[data-theme="dark"] .result-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 70%),
    var(--surface-raised) !important;
}

/* ============================================================
 * 3. BUTTON PRESS DEPTH, tactile interaction
 * ============================================================ */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-gradient,
button[type="submit"],
button[type="button"] {
  transition:
    transform 120ms var(--ease),
    box-shadow 200ms var(--ease),
    background-color 200ms var(--ease),
    border-color 200ms var(--ease) !important;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-gradient:active,
button[type="submit"]:active,
button[type="button"]:active {
  transform: var(--press) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="dark"] .btn:active,
[data-theme="dark"] .btn-primary:active,
[data-theme="dark"] .btn-gradient:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Success pulse for primary CTA clicks */
.btn-primary:active,
.btn-gradient:active {
  animation: success-pulse 240ms var(--ease);
}

@keyframes success-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}

/* ============================================================
 * 4. PRICING CARD DIFFERENTIATION
 * ============================================================
 * Audit: "highlighted pricing card doesn't visually dominate".
 * Make it scale up + add accent bar + better shadow.
 * ============================================================ */
.pricing-card.featured,
.pricing-card.popular,
.pricing-card.highlight {
  transform: scale(1.04);
  z-index: 2;
  position: relative;
  border: 2px solid var(--primary) !important;
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.12),
    0 16px 48px rgba(99, 102, 241, 0.08),
    0 32px 80px rgba(99, 102, 241, 0.04) !important;
}

.pricing-card.featured::before,
.pricing-card.popular::before,
.pricing-card.highlight::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.pricing-card.featured .price,
.pricing-card.popular .price,
.pricing-card.highlight .price {
  color:var(--primary-text) !important;
}

@media (max-width: 768px) {
  .pricing-card.featured,
  .pricing-card.popular,
  .pricing-card.highlight {
    transform: scale(1);
    margin: 16px 0;
  }
}

/* ============================================================
 * 5. AMBIENT COLOR POOLS, soft warm/cool backgrounds
 * ============================================================ */
.ambient-warm,
.section-warm {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 191, 36, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(239, 68, 68, 0.04) 0%, transparent 70%),
    var(--surface-0) !important;
}

.ambient-cool,
.section-cool {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14, 165, 233, 0.04) 0%, transparent 70%),
    var(--surface-0) !important;
}

.ambient-natural,
.section-natural {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34, 197, 94, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(132, 204, 22, 0.04) 0%, transparent 70%),
    var(--surface-0) !important;
}

[data-theme="dark"] .ambient-warm,
[data-theme="dark"] .section-warm {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(251, 191, 36, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(239, 68, 68, 0.06) 0%, transparent 70%),
    var(--surface-0) !important;
}

[data-theme="dark"] .ambient-cool,
[data-theme="dark"] .section-cool {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14, 165, 233, 0.06) 0%, transparent 70%),
    var(--surface-0) !important;
}

[data-theme="dark"] .ambient-natural,
[data-theme="dark"] .section-natural {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(132, 204, 22, 0.06) 0%, transparent 70%),
    var(--surface-0) !important;
}

/* ============================================================
 * 6. NEWSLETTER CTA, soft warm ambient pool
 * ============================================================
 * Audit: "loud blue→green banner breaks the calm aesthetic".
 * Replace with a soft warm ambient pool that fits the natural theme.
 * ============================================================ */
.newsletter-cta,
.newsletter-banner,
.subscribe-banner {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 191, 36, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(239, 68, 68, 0.08) 0%, transparent 70%),
    var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-raised) !important;
  border-radius: 24px !important;
  padding: 48px 32px !important;
  position: relative;
  overflow: hidden;
}

.newsletter-cta::before,
.newsletter-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

[data-theme="dark"] .newsletter-cta,
[data-theme="dark"] .newsletter-banner {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 191, 36, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(239, 68, 68, 0.05) 0%, transparent 70%),
    var(--surface-raised) !important;
}

/* ============================================================
 * 7. PER-GOAL VISUAL IDENTITY
 * ============================================================
 * Audit: "goal cards use emoji, should use immersive per-goal photography".
 * We can't add real photos without assets, but we add gradient overlays
 * that give each goal a distinct visual identity.
 * ============================================================ */
.goal-card[data-goal="lose_weight"],
.goal-card[data-goal="weight_loss"] {
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, transparent 50%),
    var(--surface-raised) !important;
  border-left: 3px solid #EF4444 !important;
}

.goal-card[data-goal="build_muscle"],
.goal-card[data-goal="muscle_gain"] {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    var(--surface-raised) !important;
  border-left: 3px solid #3B82F6 !important;
}

.goal-card[data-goal="maintain"],
.goal-card[data-goal="maintenance"] {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
    var(--surface-raised) !important;
  border-left: 3px solid #22C55E !important;
}

.goal-card[data-goal="manage_diabetes"],
.goal-card[data-goal="diabetes"] {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
    var(--surface-raised) !important;
  border-left: 3px solid #A855F7 !important;
}

.goal-card[data-goal="heart_health"],
.goal-card[data-goal="heart"] {
  background:
    linear-gradient(135deg, rgba(244, 63, 94, 0.08) 0%, transparent 50%),
    var(--surface-raised) !important;
  border-left: 3px solid #F43F5E !important;
}

/* ============================================================
 * 8. FOCUS RING POLISH
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* ============================================================
 * 9. SECTION DEPTH, alternating backgrounds
 * ============================================================ */
section:nth-of-type(even):not(.hero):not(.cta):not(.newsletter-section) {
  background: var(--surface-0);
}

section:nth-of-type(odd):not(.hero):not(.cta):not(.newsletter-section) {
  background: var(--bg-soft, #F1F5F9);
}

[data-theme="dark"] section:nth-of-type(odd):not(.hero):not(.cta):not(.newsletter-section) {
  background: var(--bg-soft, #1E293B);
}

/* ============================================================
 * 10. DASHBOARD HERO ENHANCEMENT
 * ============================================================ */
.dash-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 0% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 60%),
    var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-raised) !important;
}

[data-theme="dark"] .dash-hero {
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 0% 100%, rgba(34, 197, 94, 0.08) 0%, transparent 60%),
    var(--surface-raised) !important;
}

/* ============================================================
 * 11. AUTH PAGES, already gold standard, just ensure consistency
 * ============================================================ */
.auth-card,
.login-card,
.register-card {
  box-shadow: var(--shadow-overlay) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* ============================================================
 * 12. ADMIN POLISH, softer cards, better hierarchy
 * ============================================================ */
.admin-card,
.admin-section {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-raised) !important;
  border-radius: 12px !important;
}

/* ============================================================
 * 13. CALCULATOR CARD ENHANCEMENT
 * ============================================================ */
.calc-card {
  position: relative;
  overflow: hidden;
}

.calc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent, #6366F1) 100%);
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.calc-card[href]:hover::after {
  opacity: 1;
}

/* ============================================================
 * 14. BLOG CARD ENHANCEMENT
 * ============================================================ */
.blog-card {
  position: relative;
  overflow: hidden;
}

.blog-card .blog-card-image,
.blog-card img {
  transition: transform 400ms var(--ease) !important;
}

.blog-card[href]:hover .blog-card-image,
.blog-card[href]:hover img {
  transform: scale(1.05);
}

/* ============================================================
 * 15. REDUCED MOTION, respect user preference
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * 16. SCROLLBAR POLISH (subtle, modern)
 * ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.25);
  background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: content-box;
}

/* ============================================================
 * 17. TYPOGRAPHY ENHANCEMENT, better hierarchy
 * ============================================================ */
h1 {
  letter-spacing: -0.025em !important;
}

h2 {
  letter-spacing: -0.02em !important;
}

h3 {
  letter-spacing: -0.015em !important;
}

/* ============================================================
 * 18. LOADING SKELETON POLISH
 * ============================================================ */
.skeleton,
.skeleton-loader {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.04) 0%,
    rgba(15, 23, 42, 0.08) 50%,
    rgba(15, 23, 42, 0.04) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: skeleton-shimmer 1.5s infinite !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-loader {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  ) !important;
  background-size: 200% 100% !important;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}