/* ============================================
   GLOBAL — body, type, aurora, layout
   ============================================ */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
}

/* --- Aurora ambient background --- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(126, 220, 170, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(196, 181, 245, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(60, 80, 40, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 90% 90%, rgba(240, 160, 200, 0.05) 0%, transparent 60%);
  animation: auroraShift 20s ease-in-out infinite alternate;
}

@keyframes auroraShift {
  0% {
    background:
      radial-gradient(ellipse 80% 50% at 20% 80%, rgba(126, 220, 170, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(196, 181, 245, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 50%, rgba(60, 80, 40, 0.15) 0%, transparent 60%),
      radial-gradient(ellipse 50% 80% at 90% 90%, rgba(240, 160, 200, 0.05) 0%, transparent 60%);
  }
  50% {
    background:
      radial-gradient(ellipse 70% 60% at 70% 70%, rgba(136, 187, 240, 0.08) 0%, transparent 60%),
      radial-gradient(ellipse 80% 40% at 20% 30%, rgba(126, 220, 170, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 60% 40%, rgba(50, 70, 35, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 70% at 10% 90%, rgba(196, 181, 245, 0.06) 0%, transparent 60%);
  }
  100% {
    background:
      radial-gradient(ellipse 60% 50% at 50% 60%, rgba(60, 80, 40, 0.15) 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 30% 20%, rgba(240, 160, 200, 0.05) 0%, transparent 60%),
      radial-gradient(ellipse 80% 40% at 80% 80%, rgba(126, 220, 170, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 10% 40%, rgba(136, 187, 240, 0.06) 0%, transparent 60%);
  }
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); letter-spacing: 0.08em; text-transform: uppercase; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); }

a {
  color: var(--earth);
  text-decoration-color: rgba(126, 220, 170, 0.3);
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
a:hover {
  color: var(--air);
  text-decoration-color: var(--air);
}

code, pre {
  font-family: var(--font-mono);
}

pre {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-m);
  padding: var(--space-s);
  overflow-x: auto;
  font-size: var(--step--1);
}

/* --- Layout primitives --- */
.wrapper {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrapper--wide {
  max-width: 1200px;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.region {
  padding-block: var(--space-2xl);
}

.region--compact {
  padding-block: var(--space-xl);
}

/* Alternating section tints (from wellness mix) */
.region:nth-of-type(even) {
  background: var(--bg-subtle);
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* --- Cards (glass) --- */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-l);
  padding: var(--space-m);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), var(--glass-inset);
  backdrop-filter: blur(12px);
  transition: background var(--transition-base), transform var(--transition-base);
}
.card:hover {
  background: var(--glass-hover);
  transform: translateY(-2px);
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(126, 220, 170, 0.3);
  padding: var(--space-xs) var(--space-l);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(126, 220, 170, 0.15) 0%, rgba(196, 181, 245, 0.1) 100%);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-pill);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  border-radius: var(--border-radius-pill) var(--border-radius-pill) 0 0;
  pointer-events: none;
}
.btn:hover {
  background: linear-gradient(135deg, rgba(126, 220, 170, 0.3) 0%, rgba(196, 181, 245, 0.2) 100%);
  box-shadow: 0 0 30px rgba(126, 220, 170, 0.3), 0 8px 25px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  color: #fff;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(126, 220, 170, 0.25);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(126, 220, 170, 0.4);
}

/* --- Element accent utilities --- */
.accent-air   { color: var(--air); }
.accent-fire  { color: var(--fire); }
.accent-earth { color: var(--earth); }
.accent-water { color: var(--water); }

.glow-air   { text-shadow: 0 0 12px var(--glow-air); }
.glow-fire  { text-shadow: 0 0 12px var(--glow-fire); }
.glow-earth { text-shadow: 0 0 12px var(--glow-earth); }
.glow-water { text-shadow: 0 0 12px var(--glow-water); }

/* --- Wave dividers --- */
.wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: -1px 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 40px;
}
.wave-divider--flip { transform: rotate(180deg); }