/* hearthlight-legacy.css · FC-P0-001 (PR2)
   Injected by scripts/compose-prod.mjs into every legacy page when
   LEGACY_HEARTHLIGHT=1. Rethemes the legacy trees (blog, tools, learn, ru,
   root utility pages) to the Hearthlight palette and typography, and styles
   the canonical site footer that compose injects. Values mirror
   site-v3/assets/css/leelalu.css; if leelalu.css tokens change, change them
   here too (guarded by the PR3 truth system, not by CSS imports, because
   legacy markup must not load the full new-site stylesheet). */

/* Literata for headings; Inter variable covers pages that ship no fonts. */
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-600.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Old-brand tokens remapped to Hearthlight V1. Legacy pages (blog, tools,
   learn, ru) style themselves through these variables, so the remap rethemes
   them wholesale.

   SYNC RULE. This file cannot import leelalu.css (it is a theme layer loaded
   after it on legacy routes only, behind LEGACY_HEARTHLIGHT), so the values
   below are a hand copy of the canon in
   product/design-system/2026-08-12_design-system-v1.md. When a canon value
   changes, change it here in the same commit or the blog silently drifts from
   the main site, which is the exact split the design system exists to end.
   Last synced 2026-08-13 against amendment 1 of the spec.

   Names here are the OLD brand's, so read them by role, not by word:
   --ink is body text, --paper is a card surface, --cream is the page. */
:root {
  --ink: #0F0B09;            /* canon ink, body text, 18.7:1 on cream */
  --cream: #FFF9EF;          /* canon paper, page background */
  --paper: #F7F2E8;          /* canon surface, cards read as their own plane */
  --indigo: #0F0B09;         /* legacy heading colour, follows ink */
  --indigo-soft: #3A2418;    /* canon strong, button labels, 13.9:1 */
  --gold: #EFB15A;           /* canon goldSoft, decorative only */
  --coral: #8A4E0C;          /* canon goldText, the gold that carries text, 6.3:1 */
  --coral-bright: #D89033;   /* canon gold, fills and glows, never text */
  --leaf: #41604B;           /* canon verified, source chips, 6.7:1 */
  --muted: #6A6057;          /* canon muted, 5.9:1 on cream */
  --line: rgba(58, 36, 24, 0.30);  /* HELD: see the spec, canon line fails 3:1
                                      against a white control fill and the
                                      canon needs a control-border token first */
}

/* Serif voice for headings, everywhere on legacy. !important because legacy
   pages set Fraunces through class selectors that outrank an element override
   (review finding F3). */
h1, h2, h3, h4, .logo, .wordmark {
  font-family: 'Literata', Georgia, serif !important;
}

/* Lu v2 keeps her signed geometry (FD-GEO-2026-08-03-SV): legacy tags carry
   square width/height attributes sized for the old round mark; height follows
   the intrinsic ratio instead, and no circle crop (review finding F1). */
img[src$="/lu-clean-480.webp"] {
  height: auto;
  border-radius: 0;
}

/* Legacy waitlist band mixed a remapped token with a hardcoded old-indigo stop
   (review finding F2). Full Hearthlight dark band instead. */
.waitlist {
  background: linear-gradient(180deg, #1A130E 0%, #3A2418 100%);  /* dark surface, not text: kept dark, nudged to the canon night family */
}
.waitlist .lead {
  color: #F1E3CE;
}

/* Root utility pages (editorial-standards, principles, refund, founding-thanks)
   hardcode the old palette instead of using tokens; element-level overrides
   bring them into the same light. */
body {
  background: #FFF9EF;  /* canon paper */
  color: #0F0B09;       /* canon ink, 18.7:1. Literal, not var(--ink): legacy
                           pages redefine --ink in their own inline :root and
                           this layer must win by element specificity. */
}
a { color: #8A4E0C; }   /* canon goldText, the gold that may carry text */
.back { color: #6A6057; }
.vow {
  background: #F7F2E8;
  border-color: rgba(58, 36, 24, 0.30);
  border-left-color: #EFB15A;
}

/* Canonical Hearthlight footer, injected by compose. Self-contained subset of
   leelalu.css (.site-foot family) with element+class specificity so legacy
   `footer { ... }` element rules cannot bleed through. */
footer.site-foot {
  background: #FFF2DC;
  color: #6A6057;
  font-size: 14.5px;
  border-top: 1px solid rgba(58, 36, 24, 0.30);
  padding: 0;
  margin-top: 48px;
  text-align: left;
}
footer.site-foot .shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  gap: 24px;
}
footer.site-foot .foot-tag {
  color: #8A4E0C;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12.5px;
  margin: 0;
}
footer.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
}
footer.site-foot .foot-links a {
  color: #8A4E0C;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
footer.site-foot .foot-links a:hover {
  color: #0F0B09;
  text-decoration: underline;
}
footer.site-foot .foot-links-2 a {
  font-size: 14.5px;
  color: #6A6057;
}
footer.site-foot .foot-ai {
  border-top: 1px solid rgba(58, 36, 24, 0.30);
  padding-top: 16px;
  max-width: 68ch;
  margin: 0;
}
footer.site-foot .verified {
  color: #41604B;
  font-weight: 600;
}
footer.site-foot p { margin: 0; }

/* Canonical Hearthlight header (SHELL-101, WP7), injected by compose. Same
   discipline as the footer: a self-contained subset of leelalu.css
   (.site-head family) with element+class specificity so legacy page CSS
   (which also uses a .nav class) cannot restyle it. The language selector
   joins this shell when the first localized pages ship (locale manifest:
   es-US/ru-US are "preparing"; no selector may point at pages that do not
   exist yet). */
header.site-head {
  position: relative;
  z-index: 10;
  background: #FFF9EF;
  color: #0F0B09;
  border-bottom: 1px solid rgba(58, 36, 24, 0.30);
}
header.site-head .shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
header.site-head .brand {
  font-family: 'Literata', Georgia, serif;
  font-size: 21px;
  letter-spacing: 0.16em;
  color: #8A4E0C;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
header.site-head .brand img { width: 28px; height: 28px; }
header.site-head .nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}
header.site-head .nav a {
  text-decoration: none;
  font-size: 15px;
  color: #6A6057;
  padding: 10px 14px;
  border-radius: 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
header.site-head .nav a:hover,
header.site-head .nav a:focus-visible {
  color: #0F0B09;
  background: rgba(239, 177, 90, 0.16);
}
header.site-head .nav .cta { margin-left: 10px; }
header.site-head .nav a.cta,
header.site-head .nav a.cta:hover,
header.site-head .nav a.cta:focus-visible {
  color: #0F0B09;
  background: linear-gradient(180deg, #FFD97A, #EFB15A);
  border-radius: 999px;
}
header.site-head .nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(58, 36, 24, 0.30);
  border-radius: 10px;
  color: #0F0B09;
  font-size: 15px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
@media (max-width: 860px) {
  html.no-js header.site-head .nav { display: flex; position: static; flex-direction: column; align-items: stretch; }
  html.no-js header.site-head .nav-toggle { display: none; }
  header.site-head .nav-toggle { display: inline-flex; align-items: center; }
  header.site-head .nav {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: #FFF9EF;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 16px;
    border-bottom: 1px solid rgba(58, 36, 24, 0.30);
    z-index: 20;
  }
  header.site-head .nav.open { display: flex; }
  header.site-head .nav a { padding: 14px; }
  header.site-head .nav .cta { margin-left: 0; margin-top: 8px; justify-content: center; }
}