/* ============================================================
   TGN — The Good-News Outreach Foundation
   Design tokens · v2 (locked spec)
   Style: Hero-Centric + Social Proof + Flat Design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@1,400;1,500&display=swap');

:root {
  /* ---------- Brand colors (locked) ---------- */
  --color-teal:        #0D5F6E;   /* primary */
  --color-teal-deep:   #084A56;   /* hover / strong surfaces */
  --color-teal-tint:   #E8EFF0;   /* supporting wash */

  --color-orange:      #E8451A;   /* action */
  --color-orange-tint: #FDF1EE;   /* supporting wash */

  --color-white:       #FFFFFF;
  --color-bg:          #F5F5F2;   /* off-white page background */
  --color-text:        #333333;   /* body text */

  /* ---------- Derived greys (kept minimal for flat design) ---------- */
  --color-text-2:      #5C5C5C;   /* secondary text */
  --color-text-3:      #8A8A8A;   /* tertiary / meta */
  --color-hairline:    #E5E5E2;   /* 1px dividers and card borders */

  /* On-dark variants (teal hero overlays, footer) */
  --color-on-dark-1:   #FFFFFF;
  --color-on-dark-2:   rgba(255, 255, 255, 0.80);
  --color-on-dark-3:   rgba(255, 255, 255, 0.60);
  --color-on-dark-rule:rgba(255, 255, 255, 0.18);

  /* Hero photo overlay (55%) */
  --hero-overlay:      rgba(8, 74, 86, 0.55);

  /* ---------- Semantic tokens ---------- */
  --fg-1:              var(--color-text);
  --fg-2:              var(--color-text-2);
  --fg-3:              var(--color-text-3);
  --fg-brand:          var(--color-teal);
  --fg-action:         var(--color-orange);

  --bg-page:           var(--color-bg);
  --bg-alt:            var(--color-teal-tint);
  --bg-dark:           var(--color-teal);
  --bg-darker:         var(--color-teal-deep);
  --bg-card:           var(--color-white);
  --bg-cta:            var(--color-orange);

  --border-default:    1px solid var(--color-hairline);

  /* ---------- Typography ---------- */
  --font-body:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-scripture:    "Playfair Display", Georgia, serif;

  /* Type scale (locked) */
  --fs-hero:           56px;      /* letter-spacing -1.5px */
  --fs-h2:             32px;
  --fs-h3:             20px;
  --fs-body:           16px;      /* line-height 1.7 */
  --fs-small:          14px;
  --fs-micro:          12px;

  /* Stats numeral — extra scale for the counter */
  --fs-stat:           clamp(48px, 6vw, 72px);

  /* Eyebrow / overline label */
  --fs-eyebrow:        12px;
  --tracking-eyebrow:  0.16em;

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-body:           1.7;        /* locked body line-height */

  --tracking-hero:     -1.5px;
  --tracking-h2:       -0.5px;
  --tracking-h3:       -0.2px;

  /* Weights */
  --fw-body:           400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-heading:        800;

  /* ---------- Spacing (8pt grid) ---------- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           80px;
  --space-10:          96px;
  --space-11:          128px;

  --section-y:         clamp(64px, 10vw, 112px);
  --gutter:            clamp(20px, 5vw, 56px);
  --max-content:       1200px;

  /* ---------- Radii (flat: minimal rounding) ---------- */
  --radius-sm:         4px;
  --radius-md:         6px;
  --radius-full:       999px;

  /* ---------- Shadows: intentionally NONE on UI (flat) ----------
     Defined as no-ops so accidental usage doesn't break the look. */
  --shadow-none:       none;

  /* ---------- Motion ---------- */
  --ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:          150ms;
  --dur-base:          200ms;
  --dur-slow:          400ms;
}

/* ============================================================
   Base element styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-heading);
  color: var(--fg-brand);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-snug);
}
h4 { font-size: var(--fs-body); font-weight: var(--fw-semibold); }

p {
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.lead {
  font-size: 18px;
  color: var(--fg-2);
  line-height: var(--lh-body);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-action);
  margin: 0 0 var(--space-3);
}

.scripture {
  font-family: var(--font-scripture);
  font-style: italic;
  font-weight: 400;
  color: var(--color-teal-deep);
}

a { color: var(--fg-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-base) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--color-orange); color: var(--color-white); }