/*
 * Resonant System — Site Palette
 * Single source of truth for all color tokens across the site.
 * Every page links to this file. Change colors here, not in individual pages.
 *
 * Usage in HTML: var(--token-name)
 * Usage in Tailwind config: reference these values in the inline tailwind.config
 *   per page, mapping Tailwind class names to the CSS vars.
 *
 * Note: Tailwind CDN opacity modifiers (e.g. bg-midnight/80) require raw hex
 * values, not CSS vars. For the handful of places that use opacity modifiers,
 * hardcode the hex from this file into the Tailwind config. Those values are
 * marked with comments below so you know to update them if the palette changes.
 */

:root {
  /* Backgrounds */
  --surface-1: #DCDFE3;       /* primary section background (pale blue-gray) */
  --surface-2: #C5CAD1;       /* alternating section background (deeper steel-fog) */
  --midnight:  #0E1420;       /* hero, footer, dark pill fills */

  /* Text — light backgrounds */
  --text-primary:   #1A2030;  /* headings, strong text on light bg */
  --text-secondary: #4A5160;  /* body copy on light bg */
  --text-muted:     #7A8090;  /* captions, eyebrows, metadata */

  /* Text — dark backgrounds */
  --text-on-dark:       #F5F6F8;  /* primary text in hero / footer */
  --text-on-dark-muted: #BEC4CE;  /* body copy in hero */

  /* Accent (warm brass — used sparingly for links and CTAs) */
  --accent:       #B8894A;    /* links, CTA fills */
  --accent-hover: #A07838;    /* hover state */
  --accent-quiet: #8A6838;    /* accent text on light bg where full brass is loud */

  /* Borders / dividers */
  --border-subtle: #B5BAC2;   /* hairlines between sections or list items */

  /* Dark pill button text (warm off-white, not pure white) */
  --pill-text: #F0EBE0;
}