/* ==========================================================================
   Empowering Organizers — Design Tokens
   ========================================================================== */

:root {
  /* Brand colors — OFFICIAL palette (Phase 1.5 source of truth; do not alter) */
  --color-primary: #854E4C;      /* Burgundy — buttons, links, primary accents */
  --color-dark: #422627;         /* Dark Brown — headings, nav, footer, body text */
  --color-background: #F6DED4;   /* Light Blush — principal page background */
  --color-blush: #E6B9AA;        /* Peach/Rose — cards, borders, supporting sections */
  --color-soft-rose: #E6B9AA;    /* Peach/Rose — alias of --color-blush (same official value; kept as a separate token for readability where it was previously used) */
  --color-hot-pink: #FF66C4;     /* Hot Pink — official small-accent color only; fails AA contrast against every background in this palette, see README */

  /* --color-plum and --color-lavender are retired as distinct hues (not part
     of the official 5-color palette). They are aliased below, rather than
     deleted outright, so every existing rule that references them keeps
     working without needing to be rewritten. */
  --color-plum: var(--color-primary);      /* was a distinct purple; now aliases Burgundy (used only by the "More" nav chevron, which needs an accessible, legible color rather than decorative-only Hot Pink) */
  --color-lavender: var(--color-blush);    /* was a distinct pale purple; now aliases Peach/Rose (Perspectives section background, its icon backgrounds, and the "More" dropdown hover tint) */

  /* Derived tones (kept within brand palette for states/overlays) */
  --color-primary-dark: var(--color-dark);   /* hover/active state for primary buttons — reuses Dark Brown rather than inventing a new hex */
  --color-dark-overlay: rgba(66, 38, 39, 0.72); /* hero image overlay — RGB of --color-dark */
  --color-surface: #FFFFFF;           /* card surface where extra lift is needed (not a brand color; needed for white card backgrounds) */
  --color-border: var(--color-blush); /* default hairline border */
  --color-focus: var(--color-primary); /* focus ring color */

  /* Neutral accessibility helpers (used only where the palette cannot meet AA) */
  --color-text-on-primary: var(--color-background);
  --color-text-muted: #63474A;   /* derived muted Dark Brown for de-emphasized text; verified 6.45:1 on light-blush, 4.70:1 on peach-rose, 8.30:1 on white — all pass AA */

  /* Typography */
  --font-heading: 'Libre Baskerville', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.65;

  /* Spacing scale */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;
  /* Compact header row below the 1200px cutover. Intentionally slightly
     undershoots the real rendered height (~4.87rem) so the mobile menu
     panel starts a hair beneath the header rather than a hair below it —
     the header's higher stacking context (see .site-header z-index)
     hides that sliver of overlap instead of leaving a gap. */
  --header-height-mobile: 4.75rem;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}