/* =============================================================
   Live Wide Open — Design Tokens
   A small Tennessee non-profit. Plain, honest, accessible.
   ============================================================= */

/* --- Webfonts: Merriweather (headlines) + Open Sans (everything else) --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  /* ===== COLOR =============================================== */

  /* Brand — primary text (deep navy, kept for legibility) */
  --ink:           #1F2A3A;   /* primary text + brand anchor */
  --ink-2:         #3E4A5C;   /* body copy, secondary text */
  --ink-3:         #6A7281;   /* captions, meta, tertiary */

  /* Brand — action / CTA (bright optimistic blue, matches the live site) */
  --accent:        #2685E0;   /* CTA: help a scholar, register, apply */
  --accent-deep:   #1B68B8;   /* hover / press */
  --accent-soft:   #E0EFFB;   /* badge & section tints */
  --accent-pale:   #F2F8FD;   /* very pale blue wash */

  /* Secondary — community green (kept, used sparingly) */
  --green:         #2F8F5A;
  --green-deep:    #1F6F44;
  --green-soft:    #DEEEE3;

  /* Neutrals — light, clean, optimistic (white-forward) */
  --bg:            #FFFFFF;   /* page background — pure white */
  --bg-alt:        #F2F7FC;   /* alt sections — very pale blue */
  --card:          #FFFFFF;   /* cards & inputs */
  --rule:          #E4EAF1;   /* hairlines, dividers */
  --rule-strong:   #C6CFDB;   /* visible dividers, input borders */

  /* Semantic */
  --success:       #2F6B4A;
  --warn:          #C58A2F;
  --error:         #B23A2F;

  /* Photo overlays */
  --overlay-ink:   rgba(31, 42, 58, 0.55);
  --overlay-grad:  linear-gradient(180deg, transparent 0%, rgba(31, 42, 58, 0.70) 100%);

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

  /* Families — two faces, no script, no display swashes */
  --font-serif:    'Merriweather', Georgia, 'Times New Roman', serif;
  --font-sans:     'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizes — modest range. No 64/80px display sizes. */
  --fs-12:  0.75rem;     /* 12 */
  --fs-13:  0.8125rem;   /* 13 */
  --fs-14:  0.875rem;    /* 14 */
  --fs-16:  1rem;        /* 16 — body */
  --fs-18:  1.125rem;    /* 18 */
  --fs-20:  1.25rem;     /* 20 */
  --fs-24:  1.5rem;      /* 24 — h4 */
  --fs-28:  1.75rem;     /* 28 — h3 */
  --fs-32:  2rem;        /* 32 — h2 */
  --fs-40:  2.5rem;      /* 40 — h1 / hero */

  /* Weights — only what Merriweather + Open Sans provide */
  --w-regular: 400;
  --w-semi:    600;       /* Open Sans only */
  --w-bold:    700;

  /* Line heights */
  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-body:     1.6;     /* slightly looser for Merriweather/Open Sans */
  --lh-loose:    1.75;

  /* Letter spacing */
  --tr-snug:     -0.01em;
  --tr-normal:    0;
  --tr-wide:     0.04em;
  --tr-eyebrow:  0.08em;   /* gentler than before */

  /* ===== SPACING (4px base) ================================== */
  --s-0:  0;
  --s-1:  0.25rem;   /* 4  */
  --s-2:  0.5rem;    /* 8  */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.5rem;    /* 40 */
  --s-8:  3rem;      /* 48 */
  --s-9:  4rem;      /* 64 */
  --s-10: 5rem;      /* 80 — less generous; community sites are denser */

  /* Container widths */
  --w-prose:    44rem;
  --w-content:  64rem;
  --w-wide:     68rem;     /* slightly narrower than before */

  /* ===== RADII — squarer, more civic ========================= */
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-pill: 999px;         /* only for tags/avatars, not buttons */

  /* ===== SHADOWS — minimal ================================== */
  --shadow-sm:   0 1px 2px rgba(31, 42, 58, 0.06);
  --shadow-md:   0 2px 8px rgba(31, 42, 58, 0.08);
  --shadow-focus: 0 0 0 3px rgba(38, 133, 224, 0.30);

  /* ===== MOTION ============================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast:   80ms;
  --d-base:   150ms;
}

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}

/* Headings — Merriweather, bold, no italics, no swashes */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
}

.body-lg, .lead {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  color: var(--accent);
}

/* Quote — simple, no italics, no fancy left rule (use blockquote styling sparingly) */
blockquote, .quote {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 0 0 0 var(--s-4);
  margin: var(--s-5) 0;
}

/* Inline link */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-deep);
}

/* Stats */
.stat-num {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-2);
}