/* Living Hope Church — Design Tokens
 * Drop into any HTML file via <link rel="stylesheet" href="colors_and_type.css">
 * All tokens exposed as CSS custom properties on :root.
 */

@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&family=Montserrat:wght@500;600;700;800;900&family=Lato:wght@300;400;700;900&display=swap');

@font-face {
  font-family: 'Althea Bold';
  src: url('fonts/Althea-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand color ──────────────────────────────────────────────── */
  --navy:        #173560;   /* primary — CMYK 76 45 0 62 */
  --navy-900:    #0c1f3c;   /* deep ink — hover, footers, deep surfaces */
  --navy-700:    #1f4378;
  --navy-500:    #3a5c8e;
  --navy-300:    #7a92b6;
  --navy-100:    #d6dde9;
  --navy-50:     #ebeff5;

  /* Off-whites — the everyday backgrounds */
  --cream:       #F5F1E8;   /* primary page background */
  --paper:       #FBF9F4;   /* card / surface */
  --white:       #FFFFFF;

  /* Accent — used like brass trim, never as a "yellow" */
  --gold:        #C9A24B;
  --gold-600:    #A6852F;
  --gold-100:    #F1E6C9;

  /* Tertiary — sage, used very lightly for ministry chips */
  --sage:        #7A8B6F;
  --sage-100:    #DCE3D6;

  /* Neutrals — for body text + lines */
  --ink:         #1A1A1A;   /* body text */
  --ink-700:     #3a3a3a;
  --ink-500:     #6b6b6b;   /* secondary text */
  --ink-300:     #9c9c9c;   /* tertiary text / placeholders */
  --line:        #E3DDD0;   /* divider on cream */
  --line-on-dark: rgba(255,255,255,0.12);

  /* Semantic — only in admin / forms, not marketing surfaces */
  --success:     #4F7A4E;
  --warn:        #C28A2A;
  --danger:      #B0413E;
  --info:        var(--navy);

  /* ── Semantic role tokens ─────────────────────────────────────── */
  --bg:          var(--cream);
  --bg-elevated: var(--paper);
  --bg-dark:     var(--navy);
  --bg-dark-deep: var(--navy-900);

  --fg:          var(--ink);
  --fg-on-dark:  var(--paper);
  --fg-muted:    var(--ink-500);
  --fg-subtle:   var(--ink-300);

  --link:        var(--navy);
  --link-hover:  var(--navy-900);

  /* ── Type ─────────────────────────────────────────────────────── */
  /* `--font-display` is the Althea Bold provided by the church.
   * Yeseva One sits behind it as a graceful fallback if the file fails to load. */
  --font-display: 'Althea Bold', 'Yeseva One', 'Cormorant Garamond', Georgia, serif;
  --font-stamp:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scale (modular, 1.25) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight: 1.08;  /* @kind other */
  --lh-snug:  1.25;  /* @kind other */
  --lh-base:  1.55;  /* @kind other */
  --lh-loose: 1.75;  /* @kind other */

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-xwide:  0.16em;

  /* ── Spacing — 4-px grid ──────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ── Shadows — tinted toward navy, not pure black ─────────────── */
  --shadow-1: 0 1px 2px rgba(23, 53, 96, 0.06),
              0 2px 8px rgba(23, 53, 96, 0.05);
  --shadow-2: 0 2px 4px rgba(23, 53, 96, 0.08),
              0 12px 28px rgba(23, 53, 96, 0.10);
  --shadow-3: 0 8px 24px rgba(23, 53, 96, 0.14),
              0 32px 64px rgba(23, 53, 96, 0.14);
  --ring-focus: 0 0 0 2px var(--cream), 0 0 0 4px var(--gold);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);  /* @kind other */
  --dur-quick: 120ms;  /* @kind other */
  --dur-base:  180ms;  /* @kind other */
  --dur-enter: 320ms;  /* @kind other */
  --dur-hero:  720ms;  /* @kind other */

  /* ── Layout ───────────────────────────────────────────────────── */
  --content-w:  1200px;
  --content-wide: 1280px;
  --header-h: 80px;
}

/* ──────────────────────────────────────────────────────────────────
 * Base + semantic element styles
 * ────────────────────────────────────────────────────────────────── */

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-text-size-adjust: 100%;
}

/* Headings — script-led display family. Override per page when using
 * the "Living HOPE" pattern (script word + stamped word). */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0 0 var(--sp-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: var(--lh-tight);
  color: var(--navy);
  margin: 0 0 var(--sp-3);
}
h3, .h3 {
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0 0 var(--sp-3);
  text-transform: none;
}
h4, .h4 {
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--navy);
  margin: 0 0 var(--sp-2);
}

/* Eyebrow / section label — bold sans, all caps, tracked wide */
.eyebrow {
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 var(--sp-3);
}

/* Body */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  max-width: 65ch;
  text-wrap: pretty;
}
small, .small { font-size: var(--fs-14); color: var(--fg-muted); }

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inline code / mono (admin/dev surfaces only) */
code, kbd, samp {
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size: 0.95em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* The signature display pattern: "Living HOPE" — script word + stamped word */
.lockup-display {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  line-height: var(--lh-tight);
}
.lockup-display .script {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
}
.lockup-display .stamp {
  font-family: var(--font-stamp);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* Decorative double-rule — the signature divider */
.rule-double {
  border: 0;
  height: 4px;
  background:
    linear-gradient(var(--gold), var(--gold)) top/100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom/100% 1px no-repeat;
  margin: var(--sp-6) 0;
}
.rule-double.navy {
  background:
    linear-gradient(var(--navy), var(--navy)) top/100% 1px no-repeat,
    linear-gradient(var(--navy), var(--navy)) bottom/100% 1px no-repeat;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  user-select: none;
}
.btn-primary {
  background: var(--navy);
  color: var(--paper);
}
.btn-primary:hover { background: var(--navy-900); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--paper); text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--navy);
}
.btn-ghost:hover { color: var(--navy-900); background: var(--navy-50); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn[disabled], .btn:disabled { opacity: 0.4; pointer-events: none; }

/* Chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--navy-50);
  color: var(--navy);
}
.chip.gold { background: var(--gold-100); color: var(--gold-600); }
.chip.sage { background: var(--sage-100); color: var(--sage); }

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Form fields */
.field {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.field::placeholder { color: var(--ink-300); }
.field:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23,53,96,0.15);
}

/* Selection */
::selection { background: var(--gold); color: var(--navy-900); }

/* ──────────────────────────────────────────────────────────────────
 * TYPE EXPLORATION (toggleable) — Lato headings
 * When <html class="type-lato"> is set, every heading (the script+stamp
 * lockups AND the formal display titles) renders in the body font (Lato),
 * keeping the navy color. Lets us compare against the logo-style headings
 * without committing. Toggle pill is injected by site.js.
 * ────────────────────────────────────────────────────────────────── */
html.type-lato h1, html.type-lato h2,
html.type-lato .h1, html.type-lato .h2 {
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.04 !important;
}
/* Lato is wider than the script face — bring the big hero headlines down to fit */
html.type-lato h1[style*="font-size: 84px"] { font-size: clamp(42px, 6.5vw, 62px) !important; }
html.type-lato h1[style*="font-size: 72px"] { font-size: clamp(40px, 6vw, 56px) !important; }
html.type-lato h3, html.type-lato h4,
html.type-lato .h3, html.type-lato .h4 {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
/* Lockup spans inside headings — swap family, keep their own case/weight rhythm */
html.type-lato h1 span, html.type-lato h2 span,
html.type-lato h3 span, html.type-lato h4 span,
html.type-lato .lockup-display .script,
html.type-lato .lockup-display .stamp {
  font-family: var(--font-body) !important;
}
/* The script word in a lockup has no explicit weight — give it presence in Lato */
html.type-lato h1 span[style*="font-display"],
html.type-lato h2 span[style*="font-display"],
html.type-lato .lockup-display .script {
  font-weight: 800 !important;
}
/* Title case in Lato mode — defeat the inline ALL-CAPS on the stamp words */
html.type-lato h1 span, html.type-lato h2 span,
html.type-lato h3 span, html.type-lato h4 span,
html.type-lato .lockup-display .stamp {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
/* Boxed CTA-card headings — smaller in Lato to echo the Althea proportions */
html.type-lato h3[style*="line-height: 1;"] {
  font-size: 30px !important;
}
/* Home CTA cards (36px source) — smaller so "Watch the livestream" fits one line */
html.type-lato h3[style*="font-size: 36px"][style*="line-height: 1;"] {
  font-size: 21px !important;
  letter-spacing: -0.02em !important;
}
/* Archive sermon titles → Lato */
html.type-lato .lh-archive-row span[style*="font-display"] {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

/* Heading-font toggle pill (exploration control) */
#lh-typeToggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(23,53,96,0.16);
  font-family: var(--font-stamp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
#lh-typeToggle:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(23,53,96,0.22); }
#lh-typeToggle .lh-tt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-500);
}
html.type-lato #lh-typeToggle .lh-tt-dot { background: var(--gold); }
#lh-typeToggle .lh-tt-state { color: var(--ink-500); }
html.type-lato #lh-typeToggle .lh-tt-state { color: var(--navy); }
@media print { #lh-typeToggle { display: none !important; } }