/* Rozana brand layer for the public site. Loaded after styles.css and chapters.css on every
   page, it swaps the site's palette, faces and wordmark for the app's own, so the landing and
   the product are one brand. Values mirror src/app/globals.css (Rozana, day and night shift)
   rendered to hex; the type faces are the app's, copied from node_modules by
   landing/tools/copy_fonts.py. See docs/brand.md. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  /* styles.css (dark pages, the tour, legal) */
  --bg: #0a0f18;
  --panel: #121721;
  --line: #2b303a;
  --text: #f1eee9;
  --muted: #9ea5b0;
  --blue: #76b6f7;
  --accent: #f8c143;
  /* brand */
  --rz-paper: #f9f6f1;
  --rz-card: #fefdfa;
  --rz-sand: #f3f0e9;
  --rz-ink: #131b28;
  --rz-ink-muted: #5a616d;
  --rz-hairline: #e0dcd3;
  --rz-navy: #1b4a92;
  --rz-navy-deep: #163d78;
  --rz-on-navy: #fcfaf6;
  --rz-marigold: #f8bd37;
  --rz-on-marigold: #2b1c08;
  --rz-night: #0a0f18;
  --rz-night-ink: #f1eee9;
  --rz-night-soft: #9ea5b0;
  --rz-night-primary: #76b6f7;
}

body.ch {
  --ink: var(--rz-ink);
  --ink-soft: var(--rz-ink-muted);
  --paper: var(--rz-paper);
  --paper-2: var(--rz-sand);
  --night: var(--rz-night);
  --night-ink: var(--rz-night-ink);
  --night-soft: var(--rz-night-soft);
  --indigo: var(--rz-navy);
  --indigo-deep: var(--rz-navy-deep);
  --radius-xl: 20px;
}

body,
.wordmark,
.h-display,
.h-title,
.h-display-md,
h1,
h2,
h3 {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}
.wordmark,
.h-display,
.h-title,
.h-display-md,
h1,
h2,
h3 {
  font-family: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -0.022em;
}
.h-display {
  letter-spacing: -0.03em;
}

/* The wordmark: the mark beside the name, no period. */
.wordmark {
  font-weight: 650;
  letter-spacing: -0.022em;
  gap: 8px;
}
.brand-period {
  display: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  margin-right: 0;
  flex: 0 0 28px;
  background: url("brand/rozana-mark-marigold.svg") center / contain no-repeat;
}
body.ch .header .brand-mark {
  width: 28px;
  height: 28px;
  border: 0;
  margin-right: 0;
}
body.ch .header.is-dark .brand-mark,
.footer .brand-mark,
.app-sidebar > .wordmark .brand-mark {
  background-image: url("brand/rozana-mark-night.svg");
}
.brand-mark.custom-brand-mark {
  background: none;
}

/* The hero carries the mark above the headline. */
.h-hero .hero-mark {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
}

/* Night chapters take the night-shift navy and its primary; light chapters, paper and navy. */
body.ch .header.is-dark .brand-period,
body.ch .header.is-dark nav a:hover,
body.ch .header.is-dark .header-demo:hover {
  color: var(--rz-night-primary);
}
body.ch .is-dark a:not(.btn):hover,
body.ch .is-dark .ch-link {
  color: var(--rz-night-primary);
}
::selection {
  background: var(--rz-marigold);
  color: var(--rz-on-marigold);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline-color: var(--rz-navy);
}
body.ch .is-dark a:focus-visible,
body.ch .is-dark button:focus-visible {
  outline-color: var(--rz-night-primary);
}

/* The one highlight per chapter: an eyebrow or a count in marigold on dark, deep marigold on paper. */
body.ch .eyebrow,
body.ch .ch-eyebrow,
body.ch .kicker {
  color: #b8730a;
}
body.ch .is-dark .eyebrow,
body.ch .is-dark .ch-eyebrow,
body.ch .is-dark .kicker {
  color: var(--rz-marigold);
}

/* The second line of a headline is marked the way a manager marks the ledger: navy ink with
   one marigold highlighter stroke behind it, not a gradient. On night chapters the ink is
   paper and the stroke sits lower as an underline, so the light text keeps its contrast. */
.h-gradient,
.h-tile-glow .h-gradient,
.h-ai .h-gradient,
.ch-dark .h-gradient {
  color: var(--rz-navy);
  background: linear-gradient(
      transparent 62%,
      rgb(248 189 55 / 0.75) 62%,
      rgb(248 189 55 / 0.75) 88%,
      transparent 88%
    )
    no-repeat;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em 0.04em;
}
.h-tile-glow .h-gradient,
.h-ai .h-gradient,
.ch-dark .h-gradient,
.is-dark .h-gradient {
  color: var(--rz-night-ink);
  background-image: linear-gradient(
    transparent 86%,
    var(--rz-marigold) 86%,
    var(--rz-marigold) 96%,
    transparent 96%
  );
}
.h-gold {
  background: none;
  color: var(--rz-marigold);
}

.h-hero-aura {
  background:
    radial-gradient(38% 40% at 30% 35%, rgb(248 189 55 / 0.22), transparent 70%),
    radial-gradient(34% 38% at 72% 30%, rgb(27 74 146 / 0.14), transparent 70%),
    radial-gradient(40% 40% at 50% 70%, rgb(27 74 146 / 0.08), transparent 70%);
}
.h-kicker-gold {
  color: var(--rz-marigold);
}

/* The AI chapter's glow stays in the brand's two hues: no purple. */
.h-ai-orb i:nth-child(3) {
  background: radial-gradient(circle, rgb(118 182 247 / 0.35), transparent 65%);
}

/* Paper, never pure white: the light chapters and their cards. */
.h-light,
.h-final {
  background: var(--rz-paper);
}
.h-trust article,
.ch-link-card {
  background: var(--rz-card);
}

/* The closing call carries the mark again, a quiet bookend to the hero. */
.h-final .final-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
}