/* =====================================================
   New Life Church — Design Tokens
   Single source of truth for colors, type, spacing, shadows.
   Import into every artifact: <link rel="stylesheet" href="colors_and_type.css">
   ===================================================== */

/* --- Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* ----------------------------------------------------------
     PRIMARY — pulled directly from the logo.
     Navy carries weight, scripture, gravitas.
     Leaf is the signature accent — use sparingly, never as a flat fill on large surfaces.
     ---------------------------------------------------------- */
  --nl-navy-900: #051F2E;     /* deep navy — strongest text/bg */
  --nl-navy-800: #08364D;     /* logo navy — primary brand */
  --nl-navy-700: #0E4A6A;
  --nl-navy-600: #1A6388;
  --nl-navy-500: #2E84AE;
  --nl-navy-400: #6BA8C7;
  --nl-navy-300: #A6CADD;
  --nl-navy-200: #D2E4ED;
  --nl-navy-100: #EAF2F6;
  --nl-navy-50:  #F4F8FA;

  --nl-leaf-900: #3F5D1B;
  --nl-leaf-800: #5D8628;
  --nl-leaf-700: #76A833;
  --nl-leaf-600: #91CA41;     /* logo leaf — primary accent */
  --nl-leaf-500: #A6D661;
  --nl-leaf-400: #BFE188;
  --nl-leaf-300: #D4EAA9;
  --nl-leaf-200: #E6F2CB;
  --nl-leaf-100: #F1F8E2;
  --nl-leaf-50:  #F8FBEE;

  /* ----------------------------------------------------------
     EXPANDED — warm accents + neutrals.
     Wheat is the warm counterpoint to the cool navy — for paper-like
     bulletins, banners, and warm photo overlays.
     Clay is the supporting accent for events and seasonal moments
     (Easter, fall, Christmas warmth).
     ---------------------------------------------------------- */
  --nl-wheat-900: #6B5A3A;
  --nl-wheat-700: #B49764;
  --nl-wheat-500: #E1C896;    /* warm wheat — bulletin / poster bg */
  --nl-wheat-300: #F0E1BF;
  --nl-wheat-100: #FAF4E5;
  --nl-wheat-50:  #FDFAF1;

  --nl-clay-900: #6B2E1F;
  --nl-clay-700: #B85A3E;
  --nl-clay-500: #D87A5B;     /* clay accent — events, CTAs in warm contexts */
  --nl-clay-300: #ECB69E;
  --nl-clay-100: #F8DDCE;

  /* ----------------------------------------------------------
     NEUTRALS — true warm-grey scale, slightly biased toward navy.
     ---------------------------------------------------------- */
  --nl-ink-900: #14202A;
  --nl-ink-800: #1F2E3B;
  --nl-ink-700: #34465A;
  --nl-ink-600: #4F6478;
  --nl-ink-500: #6E8294;
  --nl-ink-400: #93A3B2;
  --nl-ink-300: #BCC7D1;
  --nl-ink-200: #DBE2E8;
  --nl-ink-100: #EEF2F5;
  --nl-ink-50:  #F7F9FB;
  --nl-paper:   #FBFAF6;       /* warm off-white, pairs with wheat */
  --nl-white:   #FFFFFF;

  /* ----------------------------------------------------------
     SEMANTIC — map roles, not raw colors.
     Use these in templates so seasonal/contextual swaps are easy.
     ---------------------------------------------------------- */
  --nl-bg:           var(--nl-paper);
  --nl-bg-alt:       var(--nl-ink-50);
  --nl-bg-inverse:   var(--nl-navy-800);
  --nl-surface:      var(--nl-white);
  --nl-surface-alt:  var(--nl-navy-50);

  --nl-text:         var(--nl-navy-900);
  --nl-text-muted:   var(--nl-ink-600);
  --nl-text-subtle:  var(--nl-ink-500);
  --nl-text-inverse: var(--nl-white);
  --nl-text-on-leaf: var(--nl-navy-900);   /* leaf is too light for white text */

  --nl-border:       var(--nl-ink-200);
  --nl-border-strong:var(--nl-ink-300);
  --nl-divider:      var(--nl-ink-100);

  --nl-brand:        var(--nl-navy-800);
  --nl-brand-hover:  var(--nl-navy-700);
  --nl-accent:       var(--nl-leaf-600);
  --nl-accent-hover: var(--nl-leaf-700);
  --nl-warm:         var(--nl-clay-500);

  --nl-link:         var(--nl-navy-700);
  --nl-link-hover:   var(--nl-leaf-700);

  --nl-success:      var(--nl-leaf-700);
  --nl-warning:      #C68A1A;
  --nl-danger:       #B23A2F;
  --nl-info:         var(--nl-navy-600);

  /* ----------------------------------------------------------
     TYPE
     Source Serif 4 (display + scripture) + Source Sans 3 (UI + body).
     Pairs cleanly, has true italic, supports optical sizing for serif.
     ---------------------------------------------------------- */
  --nl-font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --nl-font-sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nl-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — fluid, anchored to a 1.250 ratio at body=17px */
  --nl-text-xs:    0.75rem;     /* 12 — captions */
  --nl-text-sm:    0.875rem;    /* 14 — fine print */
  --nl-text-base:  1.0625rem;   /* 17 — body */
  --nl-text-lg:    1.25rem;     /* 20 — lede / large body */
  --nl-text-xl:    1.5rem;      /* 24 — section sub */
  --nl-text-2xl:   1.875rem;    /* 30 — section title */
  --nl-text-3xl:   2.5rem;      /* 40 — page title */
  --nl-text-4xl:   3.5rem;      /* 56 — display */
  --nl-text-5xl:   4.75rem;     /* 76 — hero */
  --nl-text-6xl:   6.5rem;      /* 104 — sermon title slide */

  --nl-leading-tight:   1.08;
  --nl-leading-snug:    1.2;
  --nl-leading-normal:  1.45;
  --nl-leading-relaxed: 1.6;
  --nl-leading-loose:   1.75;

  --nl-tracking-tight:   -0.02em;
  --nl-tracking-snug:    -0.01em;
  --nl-tracking-normal:  0;
  --nl-tracking-wide:    0.04em;
  --nl-tracking-wider:   0.12em;     /* eyebrow / overline */
  --nl-tracking-widest:  0.22em;     /* small caps section labels */

  /* ----------------------------------------------------------
     SPACING — 4px base, doubles cleanly for layout
     ---------------------------------------------------------- */
  --nl-space-0:   0;
  --nl-space-1:   4px;
  --nl-space-2:   8px;
  --nl-space-3:   12px;
  --nl-space-4:   16px;
  --nl-space-5:   24px;
  --nl-space-6:   32px;
  --nl-space-7:   48px;
  --nl-space-8:   64px;
  --nl-space-9:   96px;
  --nl-space-10:  128px;
  --nl-space-11:  192px;

  /* ----------------------------------------------------------
     RADIUS — restrained. Church should feel solid, not bubbly.
     ---------------------------------------------------------- */
  --nl-radius-sm:  4px;
  --nl-radius-md:  8px;
  --nl-radius-lg:  12px;
  --nl-radius-xl:  20px;
  --nl-radius-2xl: 32px;
  --nl-radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, never aggressive
     ---------------------------------------------------------- */
  --nl-shadow-sm:  0 1px 2px rgba(8, 54, 77, 0.06), 0 1px 1px rgba(8, 54, 77, 0.04);
  --nl-shadow-md:  0 4px 12px rgba(8, 54, 77, 0.08), 0 2px 4px rgba(8, 54, 77, 0.04);
  --nl-shadow-lg:  0 16px 32px rgba(8, 54, 77, 0.10), 0 4px 8px rgba(8, 54, 77, 0.05);
  --nl-shadow-xl:  0 32px 64px rgba(8, 54, 77, 0.14), 0 8px 16px rgba(8, 54, 77, 0.06);
  --nl-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --nl-container-sm:  640px;
  --nl-container:     1080px;
  --nl-container-lg:  1280px;
  --nl-container-xl:  1440px;

  --nl-rule-thin:    1px;
  --nl-rule-regular: 2px;
  --nl-rule-bold:    4px;

  /* ----------------------------------------------------------
     MOTION — gentle, never flashy
     ---------------------------------------------------------- */
  --nl-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --nl-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --nl-duration-1:  120ms;
  --nl-duration-2:  200ms;
  --nl-duration-3:  320ms;
  --nl-duration-4:  500ms;
}

/* =====================================================
   Base styles — apply when .nl-root is on body or wrapper
   ===================================================== */
.nl-root {
  font-family: var(--nl-font-sans);
  font-size: var(--nl-text-base);
  line-height: var(--nl-leading-normal);
  color: var(--nl-text);
  background: var(--nl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =====================================================
   Type utility classes
   ===================================================== */
.nl-eyebrow {
  font-family: var(--nl-font-sans);
  font-weight: 600;
  font-size: var(--nl-text-xs);
  letter-spacing: var(--nl-tracking-widest);
  text-transform: uppercase;
  color: var(--nl-leaf-700);
}
.nl-eyebrow--navy { color: var(--nl-navy-700); }
.nl-eyebrow--muted { color: var(--nl-text-muted); }

.nl-display {
  font-family: var(--nl-font-serif);
  font-weight: 600;
  font-size: var(--nl-text-5xl);
  line-height: var(--nl-leading-tight);
  letter-spacing: var(--nl-tracking-tight);
  color: var(--nl-text);
  text-wrap: balance;
}

.nl-h1 {
  font-family: var(--nl-font-serif);
  font-weight: 600;
  font-size: var(--nl-text-4xl);
  line-height: var(--nl-leading-tight);
  letter-spacing: var(--nl-tracking-tight);
  text-wrap: balance;
}
.nl-h2 {
  font-family: var(--nl-font-serif);
  font-weight: 600;
  font-size: var(--nl-text-3xl);
  line-height: var(--nl-leading-snug);
  letter-spacing: var(--nl-tracking-snug);
  text-wrap: balance;
}
.nl-h3 {
  font-family: var(--nl-font-serif);
  font-weight: 600;
  font-size: var(--nl-text-2xl);
  line-height: var(--nl-leading-snug);
}
.nl-h4 {
  font-family: var(--nl-font-sans);
  font-weight: 600;
  font-size: var(--nl-text-xl);
  line-height: var(--nl-leading-snug);
}
.nl-lede {
  font-family: var(--nl-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--nl-text-lg);
  line-height: var(--nl-leading-relaxed);
  color: var(--nl-text-muted);
  text-wrap: pretty;
}
.nl-body {
  font-family: var(--nl-font-sans);
  font-weight: 400;
  font-size: var(--nl-text-base);
  line-height: var(--nl-leading-relaxed);
  color: var(--nl-text);
  text-wrap: pretty;
}
.nl-small {
  font-family: var(--nl-font-sans);
  font-size: var(--nl-text-sm);
  line-height: var(--nl-leading-normal);
  color: var(--nl-text-muted);
}
.nl-caps {
  font-family: var(--nl-font-sans);
  font-weight: 600;
  letter-spacing: var(--nl-tracking-wider);
  text-transform: uppercase;
  font-size: var(--nl-text-sm);
}
.nl-scripture {
  font-family: var(--nl-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--nl-text-xl);
  line-height: var(--nl-leading-relaxed);
  color: var(--nl-text);
  text-wrap: pretty;
}
.nl-scripture cite {
  display: block;
  margin-top: var(--nl-space-3);
  font-style: normal;
  font-size: var(--nl-text-sm);
  letter-spacing: var(--nl-tracking-wider);
  text-transform: uppercase;
  color: var(--nl-leaf-700);
  font-weight: 600;
}

/* =====================================================
   Components
   ===================================================== */

/* Buttons --------------------------------------------- */
.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nl-space-2);
  padding: 14px 28px;
  font-family: var(--nl-font-sans);
  font-weight: 600;
  font-size: var(--nl-text-base);
  letter-spacing: var(--nl-tracking-wide);
  border-radius: var(--nl-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--nl-duration-2) var(--nl-ease);
  text-decoration: none;
  line-height: 1;
}
.nl-btn--primary {
  background: var(--nl-navy-800);
  color: var(--nl-white);
}
.nl-btn--primary:hover {
  background: var(--nl-navy-700);
  transform: translateY(-1px);
  box-shadow: var(--nl-shadow-md);
}
.nl-btn--accent {
  background: var(--nl-leaf-600);
  color: var(--nl-navy-900);
}
.nl-btn--accent:hover {
  background: var(--nl-leaf-700);
  color: var(--nl-white);
}
.nl-btn--outline {
  background: transparent;
  color: var(--nl-navy-800);
  border-color: var(--nl-navy-800);
}
.nl-btn--outline:hover {
  background: var(--nl-navy-800);
  color: var(--nl-white);
}
.nl-btn--ghost {
  background: transparent;
  color: var(--nl-navy-800);
  padding: 12px 16px;
}
.nl-btn--ghost:hover { background: var(--nl-navy-50); }
.nl-btn--lg { padding: 18px 36px; font-size: var(--nl-text-lg); }
.nl-btn--sm { padding: 10px 18px; font-size: var(--nl-text-sm); }

/* Card ------------------------------------------------ */
.nl-card {
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-lg);
  padding: var(--nl-space-6);
  box-shadow: var(--nl-shadow-sm);
}

/* Badges / chips -------------------------------------- */
.nl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--nl-font-sans);
  font-weight: 600;
  font-size: var(--nl-text-xs);
  letter-spacing: var(--nl-tracking-wider);
  text-transform: uppercase;
  border-radius: var(--nl-radius-pill);
  background: var(--nl-leaf-100);
  color: var(--nl-leaf-900);
}
.nl-badge--navy   { background: var(--nl-navy-100);  color: var(--nl-navy-800); }
.nl-badge--clay   { background: var(--nl-clay-100);  color: var(--nl-clay-900); }
.nl-badge--wheat  { background: var(--nl-wheat-100); color: var(--nl-wheat-900); }
.nl-badge--solid  { background: var(--nl-leaf-600);  color: var(--nl-navy-900); }

/* Form --------------------------------------------- */
.nl-input,
.nl-textarea,
.nl-select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--nl-font-sans);
  font-size: var(--nl-text-base);
  color: var(--nl-text);
  background: var(--nl-white);
  border: 1px solid var(--nl-border-strong);
  border-radius: var(--nl-radius-md);
  transition: border var(--nl-duration-2) var(--nl-ease), box-shadow var(--nl-duration-2) var(--nl-ease);
}
.nl-input:focus,
.nl-textarea:focus,
.nl-select:focus {
  outline: none;
  border-color: var(--nl-navy-700);
  box-shadow: 0 0 0 3px var(--nl-navy-100);
}
.nl-label {
  display: block;
  font-family: var(--nl-font-sans);
  font-weight: 600;
  font-size: var(--nl-text-sm);
  color: var(--nl-text);
  margin-bottom: 6px;
}

/* Rule / divider ----------------------------------- */
.nl-rule {
  height: 1px;
  background: var(--nl-divider);
  border: 0;
}
.nl-rule--strong { background: var(--nl-border-strong); }
.nl-rule--accent {
  height: var(--nl-rule-bold);
  width: 56px;
  background: var(--nl-leaf-600);
  border: 0;
}