/* =============================================================
   Kingdom Church — Colors & Type Foundation
   kingdomlondon.ca · Living Stones (Evangelical Presbyterian)
   ============================================================= */

/* ---- Fonts -------------------------------------------------- */
/* Loaded from Google Fonts. If shipping production, self-host
   the woff2 files to fonts/ and replace the @import below.    */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS
     The system runs on one bold accent (Kingdom Amber) over a
     deep midnight canvas, with a warm cream for transactional
     and editorial surfaces (give pages, prayer cards).
     ============================================================ */

  /* — Brand & accent — */
  --primary:               #FCE38E;  /* Kingdom Butter — the ONE accent. Soft, warm Sunday-morning yellow. */
  --primary-active:        #F5C04B;  /* Pressed / hovered — deeper golden butter, stays yellow not orange */
  --primary-disabled:      #3a3520;  /* Desaturated on dark canvas */
  --primary-soft:          #FFF4D0;  /* Pale butter wash for cream-surface highlights */
  --primary-deep:          #C99A18;  /* Deep amber-butter for tiny accents on cream where butter would wash out */

  /* — Canvas (dark, the default mode for marketing + app) — */
  --canvas-dark:           #0B0F1A;  /* Midnight ink — page floor */
  --surface-card-dark:     #161B2C;  /* Elevated card on dark */
  --surface-elevated-dark: #1F2640;  /* One step lighter, nested */
  --surface-deep-dark:     #07090F;  /* Footer / deepest band */

  /* — Canvas (light, for give pages, forms, print) — */
  --canvas-light:          #FBF5E6;  /* Warm buttery cream — forms, give pages, print. Never pure white. */
  --surface-soft-light:    #F2EBD7;  /* Soft cream for disabled / muted fill */
  --surface-strong-light:  #E8DFC4;  /* Input backgrounds on cream */

  /* — Hairlines & borders — */
  --hairline-on-dark:      #1F2640;  /* 1px divider on dark (same as elevated) */
  --hairline-on-light:     #E2D9BE;  /* 1px divider on cream */
  --border-strong:         #C7BDA0;  /* Heavier border on cream */

  /* — Text — */
  --ink:                   #0B0F1A;  /* Strongest text on cream */
  --body-on-dark:          #EDEAE0;  /* Default body on dark — warm white, slightly cream */
  --body-on-light:         #1A1F2E;  /* Body on cream */
  --muted:                 #8A8FA0;  /* Footer links, captions, meta */
  --muted-strong:          #B5B9C7;  /* Emphasized labels */
  --muted-on-light:        #6B6857;  /* Muted text on cream surface */
  --on-primary:            #0B0F1A;  /* Ink text on amber CTAs */
  --on-dark:               #FFFFFF;  /* Pure white for top-contrast headlines */

  /* — Semantic / status — */
  --live:                  #E63946;  /* Live-now red — service streaming, recording dot */
  --success:               #22C55E;  /* Confirm states (gift received, RSVP done) */
  --info:                  #5B8DEF;  /* Info badges, focus ring base */
  --info-ring:             rgba(91,141,239,0.5);

  /* — Editorial accent (scripture / quote) — */
  --serif-accent:          #FCE38E;  /* Scripture verse italics highlight — butter */

  /* ============================================================
     TYPE TOKENS
     ============================================================ */

  /* Families */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* — Display sizes (Bricolage Grotesque) — */
  /* hero-display */
  --hero-size:    clamp(48px, 8vw, 112px);
  --hero-weight:  800;
  --hero-leading: 0.95;
  --hero-tracking: -0.04em;

  /* display-lg */
  --display-lg-size:    clamp(40px, 6vw, 80px);
  --display-lg-weight:  700;
  --display-lg-leading: 1.0;
  --display-lg-tracking: -0.03em;

  /* display-md */
  --display-md-size:    clamp(32px, 4.5vw, 56px);
  --display-md-weight:  700;
  --display-md-leading: 1.05;
  --display-md-tracking: -0.025em;

  /* display-sm */
  --display-sm-size:    32px;
  --display-sm-weight:  700;
  --display-sm-leading: 1.1;
  --display-sm-tracking: -0.02em;

  /* — Titles — */
  --title-lg-size: 24px; --title-lg-weight: 600; --title-lg-leading: 1.25; --title-lg-tracking: -0.01em;
  --title-md-size: 20px; --title-md-weight: 600; --title-md-leading: 1.3;  --title-md-tracking: -0.005em;
  --title-sm-size: 16px; --title-sm-weight: 600; --title-sm-leading: 1.4;  --title-sm-tracking: 0;

  /* — Body — */
  --body-lg-size: 18px; --body-lg-weight: 400; --body-lg-leading: 1.55;
  --body-md-size: 15px; --body-md-weight: 400; --body-md-leading: 1.55;
  --body-sm-size: 13px; --body-sm-weight: 400; --body-sm-leading: 1.5;

  /* — Meta / labels — */
  --caption-size: 12px; --caption-weight: 500; --caption-leading: 1.3; --caption-tracking: 0.02em;
  --eyebrow-size: 12px; --eyebrow-weight: 600; --eyebrow-leading: 1.0; --eyebrow-tracking: 0.18em;
  --button-size:  14px; --button-weight:  600; --button-leading:  1.0; --button-tracking:  0.01em;

  /* — Scripture (Instrument Serif italic) — */
  --scripture-size: clamp(28px, 4vw, 56px);
  --scripture-weight: 400;
  --scripture-leading: 1.15;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  /* ============================================================
     SHADOWS  (used sparingly — system is mostly flat)
     ============================================================ */
  --shadow-card:    0 1px 2px rgba(11, 15, 26, 0.04), 0 8px 24px rgba(11, 15, 26, 0.06);
  --shadow-lift:    0 4px 12px rgba(11, 15, 26, 0.08), 0 24px 48px rgba(11, 15, 26, 0.12);
  --shadow-glow:    0 0 0 8px rgba(252, 227, 142, 0.22);
  --focus-ring:     0 0 0 3px var(--info-ring);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.6, 0.05, 0.4, 0.95);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     400ms;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-leading);
  color: var(--body-on-dark);
  background: var(--canvas-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, .hero {
  font-family: var(--font-display);
  font-size: var(--hero-size);
  font-weight: var(--hero-weight);
  line-height: var(--hero-leading);
  letter-spacing: var(--hero-tracking);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--display-lg-size);
  font-weight: var(--display-lg-weight);
  line-height: var(--display-lg-leading);
  letter-spacing: var(--display-lg-tracking);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--display-sm-size);
  font-weight: var(--display-sm-weight);
  line-height: var(--display-sm-leading);
  letter-spacing: var(--display-sm-tracking);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--title-lg-size);
  font-weight: var(--title-lg-weight);
  line-height: var(--title-lg-leading);
  letter-spacing: var(--title-lg-tracking);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-leading);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--primary);
}

.scripture {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--scripture-size);
  font-weight: var(--scripture-weight);
  line-height: var(--scripture-leading);
  color: var(--body-on-dark);
}

.scripture-ref {
  font-family: var(--font-body);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
}

code, kbd, .mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}