/* =============================================================================
   DIVINE DAILY DOSE — DESIGN SYSTEM
   Tokens, reset, and base typography. Everything else (components, layout,
   pages) is built on these custom properties. Edit values here once and the
   whole platform follows. Mobile-first; fluid type via clamp().
   ============================================================================= */

:root {
  /* ---- Brand palette (Ivory & Antique Gold — canonical) ---------------- */
  --ddd-warm-white: #faf7f2;   /* ivory — page background    */
  --ddd-charcoal:   #1c1917;   /* ink — primary text / dark  */
  --ddd-gold:       #c9a86a;   /* gold accent / CTA          */
  --ddd-sand:       #f3ede3;   /* linen — soft warm bands    */
  --ddd-olive:      #556b4e;   /* deep olive — single grounding accent (mission warmth) */
  --ddd-sage:       #7c8b75;   /* muted sage — sparing use   */

  /* ---- Derived / functional colors ------------------------------------- */
  --ddd-bg:            var(--ddd-warm-white);
  --ddd-surface:       #ffffff;          /* cream cards                  */
  --ddd-surface-soft:  #f3ede3;          /* linen band                   */
  --ddd-ink-deep:      #16140f;          /* deepest warm near-black      */
  --ddd-text:          var(--ddd-charcoal);
  --ddd-text-soft:     #44403c;          /* stone — body/meta            */
  --ddd-text-muted:    #78716c;          /* muted                        */
  --ddd-on-dark:       #faf7f2;          /* ivory text on dark           */
  --ddd-on-dark-soft:  #d9cfc0;          /* warm muted on dark           */
  --ddd-border:        #e7dfd3;          /* line — hairline on ivory     */
  --ddd-border-strong: #ddd2c0;
  --ddd-brass:         #b08d57;          /* antique brass                */
  --ddd-gold-strong:   #b08d57;          /* brass — gold text-on-light   */
  --ddd-gold-deep:     #8a6d3b;          /* deepest gold                 */
  --ddd-gold-tint:     #f2e8d6;          /* gold wash background         */
  --ddd-olive-deep:    #44563f;

  /* ---- Typography ------------------------------------------------------- */
  --ddd-font-serif: "Fraunces", "Cormorant Garamond", "Playfair Display",
                    Georgia, "Times New Roman", serif;
  --ddd-font-sans:  "Inter", "Manrope", "Plus Jakarta Sans", -apple-system,
                    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (min 320px → max ~1200px viewport) */
  --ddd-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);   /* small / meta   */
  --ddd-step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);     /* body           */
  --ddd-step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);   /* lead / h5      */
  --ddd-step-2:  clamp(1.55rem, 1.35rem + 1.00vw, 2.10rem);   /* h4 / h3        */
  --ddd-step-3:  clamp(2.05rem, 1.70rem + 1.75vw, 3.05rem);   /* h2             */
  --ddd-step-4:  clamp(2.70rem, 2.10rem + 3.00vw, 4.40rem);   /* h1             */
  --ddd-step-5:  clamp(3.20rem, 2.30rem + 4.50vw, 5.75rem);   /* hero display   */

  --ddd-leading-tight:  1.08;
  --ddd-leading-snug:   1.25;
  --ddd-leading-normal: 1.6;
  --ddd-leading-relaxed: 1.78;   /* long-form article body */

  --ddd-tracking-tight: -0.02em;
  --ddd-tracking-wide:  0.02em;
  --ddd-tracking-caps:  0.14em;   /* eyebrow / badges */

  /* ---- Spacing scale (8px base, fluid for section rhythm) -------------- */
  --ddd-space-3xs: 0.25rem;
  --ddd-space-2xs: 0.5rem;
  --ddd-space-xs:  0.75rem;
  --ddd-space-sm:  1rem;
  --ddd-space-md:  1.5rem;
  --ddd-space-lg:  2rem;
  --ddd-space-xl:  3rem;
  --ddd-space-2xl: 4rem;
  --ddd-space-3xl: 6rem;
  --ddd-section:   clamp(3.5rem, 2.5rem + 5vw, 7rem);   /* vertical section padding */

  /* ---- Layout ----------------------------------------------------------- */
  --ddd-container:      1200px;   /* default content max-width */
  --ddd-container-wide: 1360px;   /* full-bleed-ish sections   */
  --ddd-container-prose: 720px;   /* article reading column    */
  --ddd-gutter:         clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Radii ------------------------------------------------------------ */
  --ddd-radius-sm: 8px;
  --ddd-radius:    14px;
  --ddd-radius-lg: 22px;
  --ddd-radius-xl: 32px;
  --ddd-radius-pill: 999px;

  /* ---- Shadows (soft, warm-tinted, never harsh) ------------------------ */
  --ddd-shadow-xs: 0 1px 2px rgba(31, 31, 31, 0.04);
  --ddd-shadow-sm: 0 2px 8px rgba(31, 31, 31, 0.05);
  --ddd-shadow:    0 10px 30px -12px rgba(31, 31, 31, 0.12);
  --ddd-shadow-lg: 0 24px 60px -24px rgba(31, 31, 31, 0.18);
  --ddd-shadow-gold: 0 14px 34px -16px rgba(201, 168, 106, 0.55);

  /* ---- Motion ----------------------------------------------------------- */
  --ddd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ddd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ddd-dur-fast: 0.18s;
  --ddd-dur: 0.32s;
  --ddd-dur-slow: 0.6s;

  --ddd-header-h: 76px;

  color-scheme: light;
}

/* =============================================================================
   MODERN RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ddd-header-h) + 1rem);
}

body {
  background-color: var(--ddd-bg);
  color: var(--ddd-text);
  font-family: var(--ddd-font-sans);
  font-size: var(--ddd-step-0);
  line-height: var(--ddd-leading-normal);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ddd-font-serif);
  font-weight: 600;
  line-height: var(--ddd-leading-tight);
  letter-spacing: var(--ddd-tracking-tight);
  color: var(--ddd-text);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */
:focus-visible {
  outline: 2px solid var(--ddd-gold-strong);
  outline-offset: 3px;
  border-radius: 3px;
}

.ddd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--ddd-charcoal);
  color: var(--ddd-on-dark);
  border-radius: 0 0 var(--ddd-radius-sm) 0;
}
.ddd-skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   LAYOUT PRIMITIVES (reused everywhere)
   ============================================================================= */
.ddd-container {
  width: 100%;
  max-width: var(--ddd-container);
  margin-inline: auto;
  padding-inline: var(--ddd-gutter);
}
.ddd-container--wide  { max-width: var(--ddd-container-wide); }
.ddd-container--prose { max-width: var(--ddd-container-prose); }

.ddd-section { padding-block: var(--ddd-section); }
.ddd-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.ddd-stack > * + * { margin-top: var(--ddd-flow, 1.25rem); }

/* Section heading group (eyebrow + title + intro) */
.ddd-section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.ddd-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.ddd-eyebrow {
  display: inline-block;
  font-family: var(--ddd-font-sans);
  font-size: var(--ddd-step--1);
  font-weight: 600;
  letter-spacing: var(--ddd-tracking-caps);
  text-transform: uppercase;
  color: var(--ddd-gold-strong);
  margin-bottom: var(--ddd-space-sm);
}
.ddd-section-title {
  font-size: var(--ddd-step-3);
  font-weight: 500;
}
.ddd-section-intro {
  margin-top: var(--ddd-space-sm);
  font-size: var(--ddd-step-1);
  line-height: var(--ddd-leading-snug);
  color: var(--ddd-text-soft);
  font-family: var(--ddd-font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Decorative scripture-style divider */
.ddd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--ddd-gold);
}
.ddd-divider::before,
.ddd-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to var(--_dir, right), transparent, var(--ddd-border-strong));
}
.ddd-divider::after { --_dir: left; }

/* Utility */
.ddd-text-center { text-align: center; }
.ddd-mt-0 { margin-top: 0; }
.ddd-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }