/* ==========================================================================
   Divine Wellness — Base
   Global resets, typography defaults, layout primitives, decorative blobs,
   and the scroll-reveal animation contract. Loads after tokens.css.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px; /* clears the sticky announcement bar + nav */
}

body {
  margin: 0;
  background: var(--page-bg);
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--tint-sage); color: var(--ink); }

img { max-width: 100%; }

[hidden] { display: none !important; }

a { color: var(--ink-2); }
a:hover { color: var(--coral); }

input::placeholder { color: rgba(22, 58, 67, 0.45); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout primitives ---- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}

.section {
  padding: var(--section-pad) var(--gutter);
  position: relative;
  overflow: hidden;
}

.section--lg { padding: var(--section-pad-lg) var(--gutter); }
.section--sm { padding: var(--section-pad-sm) var(--gutter); }

/* ---- Typography patterns ---- */

.eyebrow {
  margin: 0 0 14px 0;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  color: var(--accent);
}

.h-display {
  margin: 0 0 10px 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--ink);
}

.h-section {
  margin: 0 0 22px 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.h-section em,
.h-display em {
  font-style: italic;
  color: var(--accent);
}

.h-card {
  margin: 0 0 14px 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

/* em accent colors — apply directly on the <em> */
.em-blue  { color: var(--blue) !important; }
.em-coral { color: var(--coral) !important; }
.em-cyan  { color: var(--cyan) !important; }
.em-gold  { color: var(--gold) !important; }
.em-mauve { color: var(--mauve) !important; }

/* Contextual accent utilities (drive .eyebrow, .link-arrow, .btn accents) */
.accent-blue  { --accent: var(--blue); }
.accent-coral { --accent: var(--coral); }
.accent-gold  { --accent: var(--gold); }
.accent-mauve { --accent: var(--mauve); }
.accent-sage  { --accent: var(--sage); }
.accent-cyan  { --accent: var(--cyan); }

.prose {
  margin: 0 0 14px 0;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--body);
  text-wrap: pretty;
}

/* Italic serif sub-line under page-hero H1s */
.lead {
  margin: 0 0 22px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: var(--lh-snug);
  color: var(--coral);
}

/* ---- Decorative drifting blobs ----
   Usage: <div class="blob blob--drift" aria-hidden="true" style="…size/pos/gradient…">
   Size, position, and radial-gradient color are per-instance (page CSS). */

/* Hero motion is carried by the [data-enter] entrance animation (js/main.js);
   these glows are quiet ambience underneath it. The gentle opacity/scale
   "breathing" is what keeps them perceptible — a symmetric blurred glow has
   no edges to track, so translation alone reads as static. */
@keyframes dwDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  50%  { transform: translate(40px, -30px) scale(1.15); opacity: 0.7; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes dwDrift2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50%  { transform: translate(-34px, 24px) scale(1.12); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
}

.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.blob--drift  { animation: dwDrift 13s ease-in-out infinite; }
.blob--drift2 { animation: dwDrift2 14s ease-in-out infinite; }

/* ---- Utilities ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}