/**
 * @file brand.css
 * joyus.ai brand layer over Mercury. Loads after mercury/global, so it
 * overrides Mercury's shadcn/ui token values by cascade order.
 * Brand: Menseal (headings) + Inter (text) · teal→indigo→violet gradient · vesica · light.
 */

/* ---- Menseal (self-hosted) ---- */
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Menseal-Regular.woff) format("woff"); }
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Menseal-Medium.woff) format("woff"); }
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Menseal-SemiBold.woff) format("woff"); }
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Menseal-Bold.woff) format("woff"); }
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/Menseal-Black.woff) format("woff"); }

/* :root:root — specificity (0,2,0) deliberately beats Mercury's theme.css
   :root (0,1,0). Both are unlayered, so a plain :root would be a fragile
   source-order tie; doubling the pseudo-class guarantees the brand wins. */
:root:root {
  /* ---- canonical brand gradient (matches the vesica + wave assets) ---- */
  --brand-teal: oklch(0.42 0.12 180);
  --brand-indigo: oklch(0.40 0.15 290);
  --brand-violet: oklch(0.45 0.12 300);
  --brand-gradient: linear-gradient(100deg, var(--brand-teal) 0%, var(--brand-indigo) 55%, var(--brand-violet) 100%);

  /* ---- rebrand Mercury's shadcn semantic tokens (light) ---- */
  --primary: oklch(0.45 0.16 285);            /* indigo — the "judgment" core; white fg passes AA */
  --primary-foreground: oklch(0.99 0.005 200);
  --accent: oklch(0.95 0.028 200);            /* faint teal wash */
  --accent-foreground: oklch(0.34 0.07 285);
  --ring: var(--brand-indigo);
  --foreground: oklch(0.22 0.03 285);         /* warm near-black, slight indigo cast */
  --card-foreground: var(--foreground);
  --muted-foreground: oklch(0.45 0.02 285);

  /* ---- typography: Menseal is display-only (headings + wordmark); Inter
     carries body and UI text. Inter's @font-face ships in mercury/global
     (src/fonts.css, variable 100–900), so no extra font payload. ---- */
  --font-heading: "Menseal", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
}

/* Belt-and-suspenders: ensure body picks up Inter even if a component
   hardcodes a family instead of reading the token. */
body { font-family: var(--font-body); }

/* Menseal only where it's a brand moment: headings and the header wordmark.
   Element selectors are enough — no Mercury template puts a font utility
   class on a heading, so nothing outranks these. */
h1, h2, h3, h4, h5, h6,
.jx-brand {
  font-family: var(--font-heading);
}

/* ---- brand helpers (used by hero accents, the wave caption, section rules) ---- */
.joyus-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.joyus-gradient-bar {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--brand-gradient);
}