/* =============================================================================
   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:    #6f6862;          /* muted — AA on white/linen (4.5:1) */
  --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;
  /* Two golds by contrast duty, not by taste:
     brass/gold are decorative or large-display only (WCAG needs 3:1 there);
     gold-strong carries all SMALL text — eyebrows, links, labels, refs — so it
     must clear 4.5:1 on the lightest surface it ever sits on (gold-tint). */
  --ddd-brass:         #b08d57;          /* antique brass — decorative/large */
  --ddd-gold-strong:   #7d6234;          /* small text on light: 5.4:1 ivory, 4.7:1 gold-tint */
  --ddd-gold-deep:     #6b5329;          /* deepest gold — emphasis text  */
  --ddd-gold-on-dark:  #d9bd85;          /* gold that survives the olive band (3.2:1, large text) */
  --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:  "Hanken Grotesk", system-ui, -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);
  /* Warm-tinted card lift — reads richer than a neutral grey shadow */
  --ddd-shadow-warm: 0 26px 60px -28px rgba(86, 64, 28, 0.30),
                     0 6px 16px -10px rgba(86, 64, 28, 0.16);

  /* ---- Texture ---------------------------------------------------------- */
  /* Fine fractal-noise "paper tooth". Editorial/print signal; sits under
     content at very low opacity so bands read as lit material, not flat fill. */
  --ddd-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- 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);
  overflow-x: clip;
}

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;
  /* clip, not hidden: overflow-x:hidden on body propagates to the viewport and
     leaves body itself visible, so a stray off-canvas panel could still widen
     the document and let phones pan sideways. clip contains it without creating
     a scroll container, so position:sticky keeps working. */
  overflow-x: clip;
}

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; }
.ddd-divider--section {
  padding-block: var(--ddd-space-sm);
  color: var(--ddd-gold);
  opacity: 0.6;
}

/* Utility */
/* Select input */
.ddd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2378716c' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.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); }