/* =============================================================
   Clear Path Bible Studies · Design Tokens
   v1.0 — derived from ClearPath_Brand_Reference.pdf
   ============================================================= */

/* Webfonts via Google Fonts (per brand reference: "Free on Google Fonts")
   If exporting offline, swap to local @font-face from /fonts. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- COLOR · NAVY FAMILY (primary anchors) ---------- */
  --navy-deep:   #0A183A;  /* primary backgrounds */
  --navy:        #112652;  /* wordmark, headings */
  --navy-mid:    #1A3468;  /* secondary surfaces */
  --navy-light:  #30528C;  /* hover, accent strokes */

  /* ---------- COLOR · GOLD FAMILY (one per surface) ---------- */
  --gold:         #D4A542;  /* hero accent */
  --gold-bright:  #F0C45C;  /* wordmark on navy */
  --gold-soft:    #E8C373;  /* light surfaces */
  --sunrise:      #FFD48C;  /* atmospheric glow */

  /* ---------- COLOR · NEUTRAL LIGHTS ---------- */
  --white:  #FFFFFF;
  --ivory:  #FAF5EB;  /* editorial background */
  --cream:  #F6F0E4;  /* warm secondary */
  --mist:   #DCE4F0;  /* body text on navy */

  /* ---------- SEMANTIC · SURFACES ---------- */
  --bg-primary:        var(--navy-deep);
  --bg-elevated:       var(--navy-mid);
  --bg-editorial:      var(--ivory);
  --bg-editorial-warm: var(--cream);
  --bg-canvas:         var(--white);

  /* ---------- SEMANTIC · FOREGROUNDS ---------- */
  --fg-on-navy:         var(--white);
  --fg-on-navy-muted:   var(--mist);
  --fg-on-navy-accent:  var(--gold-bright);
  --fg-on-light:        var(--navy);
  --fg-on-light-muted:  #5A6B85;        /* derived from navy at ~55% on ivory */
  --fg-on-light-accent: var(--gold);

  /* ---------- SEMANTIC · STROKES & DIVIDERS ---------- */
  --stroke-on-navy:        rgba(255, 255, 255, 0.16);
  --stroke-on-navy-strong: rgba(240, 196, 92, 0.55);
  --stroke-on-light:       rgba(17, 38, 82, 0.12);
  --stroke-accent:         var(--gold);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: 'Lora', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-sans:  'Poppins', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* fallback only */

  /* ---------- TYPE SCALE (rem-based, 16px root) ---------- */
  --fs-eyebrow:  0.75rem;   /* 12px · Poppins Bold caps */
  --fs-caption:  0.8125rem; /* 13px */
  --fs-small:    0.875rem;  /* 14px */
  --fs-body:     1rem;      /* 16px */
  --fs-body-lg:  1.125rem;  /* 18px */
  --fs-h6:       1.125rem;
  --fs-h5:       1.375rem;
  --fs-h4:       1.75rem;
  --fs-h3:       2.25rem;
  --fs-h2:       3rem;
  --fs-h1:       4rem;
  --fs-display:  5.5rem;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:   1.08;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* ---------- LETTER SPACING ---------- */
  --tracking-eyebrow:  0.18em;
  --tracking-caps:     0.08em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;

  /* ---------- WEIGHTS ---------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ---------- ELEVATION (subtle, editorial) ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 24, 58, 0.08);
  --shadow-md: 0 6px 18px rgba(10, 24, 58, 0.10), 0 2px 4px rgba(10, 24, 58, 0.06);
  --shadow-lg: 0 18px 40px rgba(10, 24, 58, 0.14), 0 6px 12px rgba(10, 24, 58, 0.08);
  --shadow-glow-gold: 0 0 0 1px rgba(212,165,66,0.35), 0 8px 28px rgba(212,165,66,0.18);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.24, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-sm: 880px;
  --gutter:       var(--s-5);
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

html { font-family: var(--font-sans); color: var(--fg-on-light); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); background: var(--bg-editorial); color: var(--fg-on-light); }

/* Headings — Lora carries identity */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  color: var(--navy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--navy);
  margin: 0 0 var(--s-3);
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--navy);
}

/* Tagline / pull quote — Lora Italic per brand */
.tagline, .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--navy);
}

/* Eyebrow — Poppins Bold caps with gold underline rule */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--rule { padding-top: var(--s-2); border-top: 2px solid var(--gold); display: inline-block; }

/* Body text */
p, .body { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: inherit; margin: 0 0 var(--s-4); }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.55; }
small, .caption { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--fs-caption); color: var(--fg-on-light-muted); }

/* Nav / section heads — Poppins Medium with separator dots between */
.nav-item, .section-head {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-on-light);
}

/* Links */
a { color: var(--navy-light); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
a:hover { color: var(--gold); }

/* Reverse — when on navy backgrounds */
.on-navy, .on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4, .on-navy h5, .on-navy h6, .on-navy .display, .on-navy .tagline { color: var(--white); }
.on-navy p, .on-navy .body { color: var(--mist); }
.on-navy .eyebrow { color: var(--gold-bright); }
.on-navy a { color: var(--gold-bright); }
.on-navy a:hover { color: var(--white); }

::selection { background: var(--gold-bright); color: var(--navy-deep); }