/* ============================================================
   Prophecy Voices — Colors & Type  (matched to live site)
   Source of truth: prophecyvoices.com index.html
   A reverent, Scripture-grounded prophetic newsletter brand.
   Warm near-black browns, COPPER/terracotta accent, soft cream
   sections. Playfair Display for headings, Inter for everything
   else. Faint full-bleed imagery washes; simple copper-bar dividers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand palette (verbatim from site) ---------- */
  --dark:        #FAF7F2;  /* primary dark background (warm near-black)   */
  --dark-brown:  #FCFAF6;  /* alt dark section / footer                  */
  --mid-brown:   #F3EDE3;  /* deeper warm brown panel                    */

  --copper:      #D97706;  /* PRIMARY accent — terracotta copper         */
  --copper-dark: #C26606;  /* hover / pressed copper                     */
  --copper-light:#7C2D12;  /* italic emphasis, highlights                */

  --cream:       #FFFFFF;  /* light section background                   */
  --cream-dark:  #F3EDE3;  /* alt cream / subtle fill                    */

  --text-dark:   #1A1714;  /* heading/body text on cream                 */
  --text-mid:    #6B5E52;  /* body text on cream                         */
  --text-light:  #1A1714;  /* text on dark                               */
  --text-muted:  #9C8E80;  /* muted text on dark                         */
  --gold:        #D97706;  /* defined in source but effectively unused;  */
                           /* reserve for rare warm highlight only.      */

  /* ---------- Alpha lines & fills (as used on site) ---------- */
  --copper-border:      #ECE4D8; /* card / input borders   */
  --copper-border-soft: #F3EDE3; /* pillar card border     */
  --copper-border-hi:   rgba(217,119,6,0.30); /* hover border           */
  --copper-border-nav:  #ECE4D8; /* nav / footer hairline  */
  --eyebrow-border:     rgba(217,119,6,0.30); /* eyebrow capsule        */
  --fill-dark-card:     #FFFFFF;/* card on dark           */
  --fill-dark-card-hi:  #FCFAF6;/* card hover on dark     */
  --fill-input:         #FCFAF6;/* input on dark          */
  --placeholder:        #9C8E80;/* input placeholder      */
  --copy-faint:         #C9BCAD;/* footer copyright       */

  /* ---------- Semantic roles ---------- */
  --bg:          var(--dark);
  --bg-cream:    var(--cream);
  --surface-dark:var(--dark-brown);
  --accent:      var(--copper);
  --accent-hover:var(--copper-dark);
  --on-accent:   #FFFFFF;

  /* ---------- Radii (from site) ---------- */
  --r-input:  8px;   /* inputs, buttons                      */
  --r-card:   14px;  /* cards, signup, images                */
  --r-nav:    6px;   /* nav CTA                              */
  --r-pill:   100px; /* eyebrow capsule                      */
  --r-bar:    2px;   /* the copper divider bar               */

  /* ---------- Shadows (from site) ---------- */
  --shadow-img:  0 12px 40px rgba(124,45,18,.12); /* framed spirit image    */
  --shadow-card: 0 1px 2px rgba(26,23,20,.04), 0 8px 24px rgba(124,45,18,.06);  /* white receive cards    */

  /* ---------- Spacing (8pt, section padding ≈ 100px) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
  --space-9: 64px; --space-10: 80px; --space-11: 100px; --space-12: 120px;
  --section-pad: 100px;          /* desktop section vertical padding     */
  --gutter: 48px;                /* desktop horizontal page padding      */
  --maxw: 1200px;                /* content max width                    */

  /* ---------- Type families ---------- */
  --serif:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ---------- Type tokens (web, rem-based like source) ---------- */
  --hero-size: clamp(2.8rem, 5vw, 4.2rem);   --hero-weight: 800; --hero-line: 1.1;
  --h2-size:   clamp(2rem, 3vw, 2.8rem);     --h2-weight: 700;   --h2-line: 1.2;
  --cta-size:  clamp(2rem, 3.5vw, 3rem);     --cta-weight: 800;
  --h3-card:   1.2rem;   /* pillar/movement card title */
  --h3-receive:1.15rem;  /* numbered card title        */
  --h3-signup: 1.5rem;   /* signup card title          */
  --body-size: 1rem;     --body-line: 1.7;  /* 1.8 in the spirit section */
  --small-size:0.9rem;   --small-line: 1.7;
  --note-size: 0.75rem;
  --eyebrow-size: 0.75rem; --eyebrow-track: 0.2em;
  --ref-size: 0.8rem;      --ref-track: 0.1em;
}

/* ============================================================
   Base type helpers (.pv-*) — anchored to the real site styles
   ============================================================ */
.pv-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--copper);
  padding: 6px 14px;
  border: 1px solid var(--eyebrow-border);
  border-radius: var(--r-pill);
}

.pv-hero   { font-family: var(--serif); font-size: var(--hero-size); font-weight: 800; line-height: var(--hero-line); color: var(--text-light); }
.pv-hero em{ font-style: italic; font-weight: 800; color: var(--copper-light); }

.pv-h2     { font-family: var(--serif); font-size: var(--h2-size); font-weight: 700; line-height: var(--h2-line); }
.pv-h2.on-dark  { color: var(--text-light); }
.pv-h2.on-cream { color: var(--text-dark); }

.pv-h3     { font-family: var(--serif); font-weight: 700; line-height: 1.25; }

.pv-verse  { font-family: var(--sans); font-style: italic; font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); }
.pv-ref    { font-family: var(--sans); font-size: var(--ref-size); font-weight: 600; letter-spacing: var(--ref-track); text-transform: uppercase; color: var(--copper); }

.pv-body-cream { font-family: var(--sans); font-size: var(--body-size); line-height: 1.8; color: var(--text-mid); }
.pv-body-dark  { font-family: var(--sans); font-size: var(--body-size); line-height: var(--body-line); color: var(--text-muted); }
.pv-note   { font-family: var(--sans); font-size: var(--note-size); line-height: 1.5; color: var(--placeholder); }

/* The brand's only divider: a short copper bar */
.pv-divider { width: 60px; height: 3px; background: var(--copper); border-radius: var(--r-bar); border: 0; }