/* ==========================================================================
   Lassoing the Stars — design tokens
   Palette is sampled directly from research-assets/logo.png: the five OES
   star colors, the lariat cream, and warm neutrals that let them stay accents.
   Western restraint: neutrals carry the page, star colors punctuate it.
   ========================================================================== */

:root {
  /* --- The five points of the star (from the logo, tuned for web contrast) - */
  --star-blue: #2a6ca8;
  --star-gold: #c8860d;
  --star-white: #f7f5ef;
  --star-green: #1d7a35;
  --star-red: #a41f24;

  /* Darkened variants that hold AA against parchment for text use */
  --star-blue-ink: #1d4d7a;
  --star-gold-ink: #8a5b06;
  --star-green-ink: #145624;
  --star-red-ink: #7d1519;

  /* --- Warm neutral ground: parchment, saddle, and ink ---------------------- */
  --parchment: #f4ecdc;
  --parchment-deep: #e8dcc4;
  --parchment-edge: #d8c8a8;
  --rope-cream: #f0e8c0;
  --saddle: #6b4423;
  --saddle-dark: #4a2f18;
  --ink: #241a12;
  --ink-soft: #4f4136;
  --ink-muted: #6d5d4e;

  /* --- Semantic roles ------------------------------------------------------- */
  --bg: var(--parchment);
  --bg-alt: var(--parchment-deep);
  --surface: #fffdf8;
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --accent: var(--star-gold);
  --accent-ink: var(--star-gold-ink);
  --rule: color-mix(in srgb, var(--saddle) 22%, transparent);

  /* --- Type ----------------------------------------------------------------- */
  /* Display: slab serif carries the western note without costume lettering.
     Body: humanist sans keeps long-form charity copy readable. */
  --font-display: "Rye", "Bitter", Georgia, "Times New Roman", serif;
  --font-head: "Bitter", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale, 320px → 1280px viewport */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --fs-hero: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);

  --lh-tight: 1.1;
  --lh-head: 1.2;
  --lh-body: 1.65;

  /* --- Space (8px base) ------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* --- Structure ------------------------------------------------------------- */
  --measure: 62ch;
  --container: 1120px;
  --container-narrow: 760px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgb(36 26 18 / 0.08), 0 2px 6px rgb(36 26 18 / 0.06);
  --shadow: 0 2px 4px rgb(36 26 18 / 0.08), 0 8px 20px rgb(36 26 18 / 0.1);
  --shadow-lg: 0 4px 8px rgb(36 26 18 / 0.1), 0 18px 44px rgb(36 26 18 / 0.14);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

/* Respect reduced-motion globally; individual components need not repeat this. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}