/* =====================================================================
   Grace + Bread — Colors & Type
   ---------------------------------------------------------------------
   Drop-in stylesheet for any Grace + Bread surface. Imports the two
   webfonts the brand uses and declares both BASE tokens (colors, type
   scales, spacing, radii) and SEMANTIC tokens (h1, h2, body, eyebrow,
   etc.) you can apply directly to elements.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css">
     <h1 class="gb-h1">Show grace.</h1>
     <p  class="gb-body">Build relationships, restore the broken…</p>
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;700;900&display=swap");

:root {
  /* ---------- BRAND COLORS -------------------------------------------- */
  /* Primary Gold sampled from the wordmark (rgb 183 144 102). The brand
     lives almost entirely in this single warm gold against parchment. */
  --gb-gold:            #B79066;     /* primary brand mark */
  --gb-gold-deep:       #8E6E4D;     /* hover / pressed / footer wordmark */
  --gb-gold-soft:       #D4B894;     /* tint for backgrounds, hairlines */
  --gb-gold-wash:       #EFE3D0;     /* large-area wash, callout cards */

  /* Parchment / paper neutrals — never pure white on the brand site. */
  --gb-paper:           #FBF8F2;     /* default page background */
  --gb-paper-warm:      #F5EFE6;     /* alt section background */
  --gb-paper-cool:      #FFFFFF;     /* card fill when contrast is needed */

  /* Ink — warm near-blacks, never pure #000. */
  --gb-ink:             #2B2622;     /* body text, primary ink */
  --gb-ink-soft:        #5A5048;     /* secondary text, captions */
  --gb-ink-mute:        #8C8278;     /* tertiary text, metadata, disabled */

  /* Hairlines and dividers */
  --gb-rule:            #E5DDD0;     /* default divider */
  --gb-rule-strong:     #C9B89E;     /* heavier rule under section headers */

  /* Status (used sparingly — forms only) */
  --gb-success:         #6F8B5A;     /* sage green */
  --gb-error:           #B5564A;     /* warm brick red */

  /* ---------- SEMANTIC ALIASES ---------------------------------------- */
  --gb-bg:              var(--gb-paper);
  --gb-bg-alt:          var(--gb-paper-warm);
  --gb-fg:              var(--gb-ink);
  --gb-fg-muted:        var(--gb-ink-soft);
  --gb-fg-faint:        var(--gb-ink-mute);
  --gb-accent:          var(--gb-gold);
  --gb-accent-hover:    var(--gb-gold-deep);
  --gb-link:            var(--gb-gold-deep);

  /* ---------- TYPE FAMILIES ------------------------------------------ */
  /* Display: high-contrast didone serif matching the wordmark. */
  --gb-font-display:    "Playfair Display", "Didot", "Bodoni 72", "Cormorant Garamond", Georgia, serif;
  /* Body / UI: humanist sans, friendly, lots of weights. */
  --gb-font-body:       "Lato", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Mono: only for the 501(c)(3) / EIN block in the footer. */
  --gb-font-mono:       ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---------- TYPE SCALE — px ---------------------------------------- */
  --gb-size-eyebrow:    13px;   /* tracked uppercase label */
  --gb-size-caption:    14px;
  --gb-size-body-sm:    15px;
  --gb-size-body:       17px;
  --gb-size-body-lg:    20px;   /* lede paragraph */
  --gb-size-h5:         20px;
  --gb-size-h4:         24px;
  --gb-size-h3:         32px;
  --gb-size-h2:         44px;
  --gb-size-h1:         64px;
  --gb-size-display:    96px;   /* hero only */

  /* ---------- LINE HEIGHTS / TRACKING -------------------------------- */
  --gb-lh-tight:        1.08;
  --gb-lh-snug:         1.25;
  --gb-lh-normal:       1.55;
  --gb-lh-loose:        1.75;
  --gb-track-eyebrow:   0.22em;
  --gb-track-button:    0.12em;
  --gb-track-display:   -0.01em;

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

  /* ---------- RADII -------------------------------------------------- */
  /* Grace + Bread is a sharp-edge brand. Radii are minimal. */
  --gb-radius-none:  0px;
  --gb-radius-sm:    2px;
  --gb-radius-md:    4px;
  --gb-radius-pill:  999px;   /* only for tags / chips */

  /* ---------- SHADOWS ------------------------------------------------ */
  /* Soft, warm — never the default cool gray. */
  --gb-shadow-sm: 0 1px 2px rgba(76, 56, 32, 0.06);
  --gb-shadow-md: 0 6px 18px -8px rgba(76, 56, 32, 0.18);
  --gb-shadow-lg: 0 24px 60px -24px rgba(76, 56, 32, 0.28);

  /* ---------- BORDERS ------------------------------------------------ */
  --gb-border-hair: 1px solid var(--gb-rule);
  --gb-border-rule: 1px solid var(--gb-rule-strong);
  --gb-border-mark: 2px solid var(--gb-gold);

  /* ---------- MOTION ------------------------------------------------- */
  --gb-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --gb-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --gb-dur-fast:       140ms;
  --gb-dur-normal:     240ms;
  --gb-dur-slow:       420ms;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES — apply directly to elements
   ===================================================================== */

.gb-display {
  font-family: var(--gb-font-display);
  font-weight: 500;
  font-size: var(--gb-size-display);
  line-height: var(--gb-lh-tight);
  letter-spacing: var(--gb-track-display);
  color: var(--gb-fg);
  text-wrap: balance;
}

.gb-h1 {
  font-family: var(--gb-font-display);
  font-weight: 500;
  font-size: var(--gb-size-h1);
  line-height: var(--gb-lh-tight);
  letter-spacing: var(--gb-track-display);
  color: var(--gb-fg);
  text-wrap: balance;
}

.gb-h2 {
  font-family: var(--gb-font-display);
  font-weight: 500;
  font-size: var(--gb-size-h2);
  line-height: var(--gb-lh-snug);
  color: var(--gb-fg);
  text-wrap: balance;
}

.gb-h3 {
  font-family: var(--gb-font-display);
  font-weight: 500;
  font-size: var(--gb-size-h3);
  line-height: var(--gb-lh-snug);
  color: var(--gb-fg);
}

.gb-h4 {
  font-family: var(--gb-font-body);
  font-weight: 700;
  font-size: var(--gb-size-h4);
  line-height: var(--gb-lh-snug);
  letter-spacing: 0.01em;
  color: var(--gb-fg);
}

.gb-h5 {
  font-family: var(--gb-font-body);
  font-weight: 700;
  font-size: var(--gb-size-h5);
  line-height: var(--gb-lh-snug);
  color: var(--gb-fg);
}

.gb-eyebrow {
  font-family: var(--gb-font-body);
  font-weight: 700;
  font-size: var(--gb-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--gb-track-eyebrow);
  color: var(--gb-gold-deep);
}

.gb-lede {
  font-family: var(--gb-font-body);
  font-weight: 400;
  font-size: var(--gb-size-body-lg);
  line-height: var(--gb-lh-loose);
  color: var(--gb-fg);
  text-wrap: pretty;
}

.gb-body {
  font-family: var(--gb-font-body);
  font-weight: 400;
  font-size: var(--gb-size-body);
  line-height: var(--gb-lh-loose);
  color: var(--gb-fg);
  text-wrap: pretty;
}

.gb-body-sm {
  font-family: var(--gb-font-body);
  font-weight: 400;
  font-size: var(--gb-size-body-sm);
  line-height: var(--gb-lh-normal);
  color: var(--gb-fg);
}

.gb-caption {
  font-family: var(--gb-font-body);
  font-weight: 400;
  font-size: var(--gb-size-caption);
  line-height: var(--gb-lh-normal);
  color: var(--gb-fg-muted);
}

.gb-scripture {
  /* Pull-quotes from Scripture or the founders. */
  font-family: var(--gb-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--gb-size-h3);
  line-height: var(--gb-lh-snug);
  color: var(--gb-fg);
  text-wrap: balance;
}

.gb-citation {
  /* The "- Matthew 25:40" attribution line. */
  font-family: var(--gb-font-body);
  font-weight: 700;
  font-size: var(--gb-size-body);
  letter-spacing: 0.02em;
  color: var(--gb-fg-muted);
}

.gb-mono {
  font-family: var(--gb-font-mono);
  font-weight: 400;
  font-size: var(--gb-size-body-sm);
  color: var(--gb-fg-muted);
  line-height: var(--gb-lh-normal);
}

/* Anchor — gold underline-on-hover, never bright blue. */
.gb-link {
  color: var(--gb-link);
  text-decoration: none;
  border-bottom: 1px solid var(--gb-gold-soft);
  transition: border-color var(--gb-dur-fast) var(--gb-ease),
              color var(--gb-dur-fast) var(--gb-ease);
}
.gb-link:hover {
  color: var(--gb-ink);
  border-bottom-color: var(--gb-gold-deep);
}

/* Section divider rule echoing the wordmark's baseline. */
.gb-rule {
  border: 0;
  border-top: 1px solid var(--gb-rule-strong);
  margin: var(--gb-space-7) 0;
}