/* ===========================================================================
   brand-bridge.css — STAGED BRIDGE, NOT THE END STATE. Read before editing.

   @negrete/tokens (packages/tokens/tokens.css) is still the OLD navy/bone/
   terracotta palette, because Header/Footer/SiteLayout in @negrete/ui are
   shared with apps/practice, which has not migrated to the new brand yet.
   This file re-declares those SAME old custom-property names, scoped to
   apps/marketing only (loaded after @negrete/tokens/tokens.css in the head),
   so the shared chrome picks up the new brand colors on marketing pages
   without touching the shared package or apps/practice.

   WHEN apps/practice MIGRATES: do it properly instead — reskin
   packages/tokens/tokens.css itself with brand-tokens.css's values, swap the
   Cormorant/Inter Tight/JetBrains Google Fonts link in SiteLayout.astro for
   Albert Sans, update Header.astro's hardcoded .nav background literal — and
   DELETE this file. Redefining --terracotta to hold jade values is
   deliberate tech debt, not a design decision; it only exists so the old
   variable names resolve to approximately-correct colors in the meantime.

   Loaded after brand-tokens.css, which defines the real --color-* tokens
   this file maps onto. Font tokens (--serif/--sans/--mono) are intentionally
   NOT remapped here — typography is a separate, later stage.
   =========================================================================== */

:root {
  --bone: var(--color-day);
  --bone-deep: var(--color-card);
  --paper: var(--color-card);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-secondary);
  --ink-mute: var(--color-jade-text);
  --terracotta: var(--color-jade-deep); /* large accents/hover, NOT the amber CTA color — amber stays reserved for the one primary booking action */
  --clay-soft: var(--color-jade-bright);
  --divider: var(--hairline-light);
}

/* Header.astro's sticky nav background is a hardcoded rgba literal (not a
   var), written to match the old --bone at 92% alpha exactly — so redeclaring
   --bone above can't reach it. Recolor it to the new day tone at the same
   alpha so the bar stays a coherent light frosted strip. It won't go fully
   transparent over the night hero the way a from-scratch nav would (that's
   a positioning/behavior change to a shared component, out of scope here). */
.nav {
  background: rgba(245, 241, 230, 0.92) !important;
}

/* The shared nav-cta button (variant: 'cta') is the SAME "book a
   consultation" action everywhere it appears in the marketing app (nav,
   hero, /stories, portal) — amber is reserved sitewide for that one action,
   matching the recolored pages. Header.astro's own rest-state background
   (var(--ink)) and hover (var(--terracotta), now jade via the remap above)
   would otherwise never reach amber, so it's forced here with !important to
   beat the component's own scoped specificity, same reasoning as .nav above. */
.nav-cta {
  background: var(--color-amber) !important;
  color: var(--color-amber-ink) !important;
  box-shadow: var(--shadow-cta-glow);
}
.nav-cta:hover {
  background: var(--color-amber-deep) !important;
}