/* =========================================================================
   TRM Ecosystem — Design Tokens
   Source of truth: trm-ecosystem-design-brief.md, Part 1.
   These values are computed (HSL-derived tints/shades of the three base
   hex colors), not hand-picked — see the brief for the derivation.

   NOTE ON DUPLICATION: these same hex values are also declared inside
   assets/tailwind-config.js. That duplication is deliberate, not drift —
   Tailwind's CDN build (JIT, no build step) needs colors declared directly
   in its config for the text-{color}/{opacity} modifier syntax to work
   (e.g. text-paper/70). CSS custom properties can't drive that syntax on
   their own. If a token value ever changes, update BOTH files and note it
   in the brief.
   ========================================================================= */

:root {
  /* ---- Base ---- */
  --navy-base: #1B2B3B;
  --gold-base: #C9A84C;
  --cream-base: #FAF7F2;

  /* ---- Navy scale (dark-field surfaces) ---- */
  --navy-950: #0E171F; /* darkest — footer / deepest band */
  --navy-900: #172533; /* base field — page background */
  --navy-800: #1E3042; /* card / raised surface */
  --navy-700: #263D54; /* hover state / section-band tint */
  --navy-600: #335270; /* border / divider on dark */
  --navy-400: #628CB7; /* muted text on dark (rarely used directly — prefer paper at opacity) */

  /* ---- Gold scale (accent — used sparingly, never as a field color) ---- */
  --gold-300: #F1E8D0; /* pale tint — cream-field use only */
  --gold-400: #D9C282; /* headline emphasis text on dark — 8.9:1 contrast on navy-900 */
  --gold-500: #C9A84C; /* primary accent / CTA fill — 6.8:1 contrast on navy-900 */
  --gold-600: #B09035; /* hover / pressed state */
  --gold-700: #8D732B; /* deep gold — text-safe on cream at large sizes only */

  /* ---- Cream scale (light-field surfaces — unused on this dark-field
     site, declared here for cross-site consistency with davidwilhite.realtor) ---- */
  --cream-50: #FBF9F6;
  --cream-100: #F8F4ED;
  --cream-200: #F2EBDE;
  --cream-300: #EADDC8;

  /* ---- Text pairs ---- */
  --ink: #172533;   /* = navy-900, text on any cream/light surface */
  --paper: #FAF7F2; /* = cream-base, text on any navy/dark surface */

  /* ---- Shadows (navy-tinted, layered, never flat black) ----
     Not used on autobanking.io itself — this site's elevation is handled
     by flat fills + a 1px gold-tinted divider instead (see site.css).
     Declared here so the token set stays complete and portable to the
     other two sites, which do use these. */
  --shadow-low: 0 1px 2px rgba(27, 43, 59, 0.24), 0 2px 4px rgba(27, 43, 59, 0.16);
  --shadow-medium: 0 2px 4px rgba(27, 43, 59, 0.20), 0 8px 16px rgba(27, 43, 59, 0.20);
  --shadow-high: 0 4px 8px rgba(27, 43, 59, 0.24), 0 16px 32px rgba(27, 43, 59, 0.24);

  /* ---- AutoBanking-local role aliases ----
     Map the site's existing class vocabulary (navydeep, navymid, etc.)
     onto the shared scale above, so index.html's markup doesn't need to
     change just because the token system got formalized. */
  --navydeep: var(--navy-800);
  --navymid: var(--navy-700);
  --blackmid: var(--navy-950);
  --gold: var(--gold-500);
  --gold-light: var(--gold-400);
  --gold-border: rgba(201, 168, 76, 0.35);
  --gold-dim: rgba(201, 168, 76, 0.10);
}