/* ============================================================
   Cabinet — shared site stylesheet (light "paper" theme)
   Source of truth: index.html landing page + DESIGN.md
   Loaded AFTER each page's inline <style> so it overrides.
   ------------------------------------------------------------
   Two jobs:
   1. Define the landing-page light tokens AND alias every old
      dark-theme token name to the new light values, so any
      surviving var(--background)/var(--surface)/var(--accent)/
      var(--gold)/var(--bg)/var(--panel)/... references on a
      page flip to the light theme automatically.
   2. Provide the canonical sticky header, footer, navy buttons,
      and light-theme overrides for the common SEO components.
   ============================================================ */

:root {
  /* --- Landing-page light palette (real tokens) --- */
  --paper: #F7F0E6;
  --paper-strong: #FFFDF8;
  --paper-soft: #F2E5D2;
  --ink: #2D3436;
  --muted: #636E72;
  --quiet: #7B807F;
  --navy: #08152C;
  --navy-hover: #04101f;
  --forest: #536A4D;
  --brass: #B8956A;
  --brass-dark: #8D6B3C;
  --line: #E4D4BD;
  --white: #FFFFFF;
  --shadow: 0 24px 80px rgba(74, 54, 27, .16);
  --success: #047857;
  --error: #d63031;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --max: 1160px;

  /* --- Aliases: dark "Variant A" tokens -> light --- */
  --background: var(--paper);
  --surface: var(--paper-strong);
  --surface-2: var(--paper-soft);
  --border: var(--line);
  --accent: var(--brass-dark);
  --accent-hover: var(--brass);
  --accent-brass: var(--brass);
  --accent-glow: rgba(141, 107, 60, .10);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--quiet);

  /* --- Aliases: dark "Variant B" (answers script) tokens -> light --- */
  --bg: var(--paper);
  --panel: var(--paper-strong);
  --gold: var(--brass-dark);

  /* --- Aliases: Product Hunt bespoke tokens -> light --- */
  --black: var(--paper);
  --charcoal: var(--paper);
  --card: var(--paper-strong);
  --card-border: var(--line);
  --card-hover: var(--paper-soft);
  --gold-light: var(--brass);
  --gold-dim: var(--brass-dark);
  --gold-glow: rgba(141, 107, 60, .12);
  --cream: var(--ink);
  --cream-dim: var(--muted);
  --cream-faint: var(--quiet);
  --burgundy: var(--navy);
  /* keep PH accent legible but on-brand */
  --ph-orange: #DA552F;
}

/* ---------- Base ---------- */
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
}
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 700; }
img { max-width: 100%; }
a { color: var(--brass-dark); text-decoration: none; }
a:hover { color: var(--navy); }

/* ---------- Contextual internal-link CTAs ---------- */
.builder-crosslink {
  margin: 36px 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-strong);
  box-shadow: 0 18px 50px rgba(74, 54, 27, .10);
}
.builder-crosslink h2,
.builder-crosslink h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
}
.builder-crosslink p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
.builder-crosslink .btn {
  margin-top: 0;
}

/* ---------- Buttons -> navy (match landing page) ----------
   Uses !important to beat pages that set color:var(--background)!important
   or background:var(--accent) on gold buttons. */
.btn,
.btn-gold,
.btn-primary,
.cta-btn,
.nav-cta,
.app-store-badge,
a[class*="cta"],
button.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background: var(--navy) !important;
  color: var(--white) !important;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 14px 34px rgba(8, 21, 44, .18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn:hover,
.btn-gold:hover,
.btn-primary:hover,
.cta-btn:hover,
.nav-cta:hover,
.app-store-badge:hover,
a[class*="cta"]:hover,
button.cta:hover {
  transform: translateY(-2px);
  background: var(--navy-hover) !important;
  color: var(--white) !important;
}

/* ---------- Canonical sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 240, 230, .88);
  border-bottom: 1px solid rgba(228, 212, 189, .74);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header .nav {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent; /* header's own light bg shows through; ignore any page-level nav bg */
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--ink) !important;
}
.site-header .brand img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(8, 21, 44, .14);
}
.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--muted);
  font-size: .94rem;
  font-weight: 600;
}
.site-header .nav-links a { color: var(--muted); }
.site-header .nav-links a:hover { color: var(--navy); }
.site-header .nav-cta {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
}
@media (max-width: 960px) {
  .site-header .nav { height: 66px; }
  .site-header .nav-links { gap: 16px; }
  .site-header .nav-links a:not(.nav-cta):not(.nav-pricing) { display: none; }
}

/* ---------- Canonical footer ---------- */
footer {
  padding: 40px 0;
  background: var(--paper-strong);
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: .9rem;
}
footer .footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
footer .footer-links a,
footer a { color: var(--quiet); }
footer .footer-links a:hover,
footer a:hover { color: var(--navy); }

/* ---------- Component overrides: dark -> light ----------
   These win via source order (site.css loads after inline <style>).
   They only fix surfaces/text that the token aliasing can't reach
   (e.g. hardcoded #fff text on a now-light surface). */

/* Hero: drop dark gradient, keep layout from the page */
.hero,
section.hero,
header.hero {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.hero h1, .hero h2, .hero h3 { color: var(--ink); }
.hero p { color: var(--muted); }
.hero .label,
.hero .eyebrow,
.eyebrow,
.breadcrumb,
.breadcrumb a,
.phase-label,
.section-label,
.kicker {
  color: var(--brass-dark) !important;
}
.breadcrumb a:hover { color: var(--navy); }

/* Elevated cards / panels -> paper-strong on a line border */
.phase,
.callout,
.checklist,
.tldr,
.template,
.faq details,
.card,
.matrix .quad,
.question-card,
.framework-box,
.box,
.panel,
.answer,
.decision-table,
.decision-row,
.proof-item,
.step,
.icon-box,
.tip {
  background: var(--paper-strong);
  border-color: var(--line);
  color: var(--ink);
}
.phase h3, .callout h3, .card h3, .quad h3, .faq summary, .tldr h2 { color: var(--ink); }
.phase p, .callout p, .card p, .quad p, .faq p, .answer p, .tldr p { color: var(--muted); }
.callout strong, .phase-label, .checklist strong { color: var(--brass-dark); }

/* Gold-tinted dark fills -> faint brass tint on paper */
.checklist,
.script,
.script-box,
.takeaway,
.highlight-box {
  background: rgba(141, 107, 60, .08) !important;
  color: var(--ink);
}

/* Emphasis CTA band -> navy with white text (fixes #fff on light surface) */
section.cta,
.cta-section,
.cta-band,
.final-cta {
  background: var(--navy) !important;
  color: var(--white) !important;
  border-radius: 12px;
}
section.cta h1, section.cta h2, section.cta h3,
.cta-section h1, .cta-section h2, .cta-section h3,
.cta-band h1, .cta-band h2, .cta-band h3 { color: var(--white); }
section.cta p,
.cta-section p { color: rgba(255, 255, 255, .82); }
/* A button inside a navy band reads best inverted (white bg, navy text) */
section.cta .btn, section.cta .cta-btn,
.cta-section .btn, .cta-section .cta-btn,
.final-cta .btn, .coach-band .btn {
  background: var(--white) !important;
  color: var(--navy) !important;
}
section.cta .btn:hover, .cta-section .btn:hover, .final-cta .btn:hover {
  background: var(--paper-soft) !important;
}

/* Navy brand bands stay navy but text already light — keep readable */
.coach-band,
.nav-band,
.dark-band {
  background: var(--navy);
  color: var(--white);
}

/* Tables / dividers */
table, th, td { border-color: var(--line); }
th { color: var(--ink) !important; background: var(--paper-soft); }
.toc, .toc strong { color: var(--ink) !important; }
hr { border-color: var(--line); }

/* Inputs */
input, textarea, select {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--quiet); }

/* "Bad" / error accents stay red */
.quad.bad h3, .bad, .error, .danger { color: var(--error); }