/* Fable Reports theme layer
   Loaded after the generated base stylesheet so every page shares one semantic
   light/dark palette without coupling the design to literal colours. */
:root {
  color-scheme: light dark;
  --surface: rgba(255, 255, 255, .36);
  --surface-hover: rgba(255, 255, 255, .66);
  --text-muted: #5f605a;
  --text-subtle: #686961;
  --accent-ink: #8b5e10;
  --accent-strong: #9f6e1a;
  --gold-button-ink: #18140c;
  --inverse-bg: #171915;
  --inverse-panel: #22251f;
  --inverse-text: #fffaf0;
  --inverse-muted: #a7a99f;
  --inverse-line: rgba(255, 255, 255, .14);
  --shadow-soft: rgba(43, 34, 22, .08);
  --shadow-strong: rgba(26, 22, 15, .2);
  --focus-ring: rgba(159, 110, 26, .28);
  --success: #477b58;
  --success-bg: rgba(71, 123, 88, .1);
  --error: #a34839;
  --error-bg: rgba(163, 72, 57, .1);
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #10110f;
    --ink-soft: #171915;
    --paper: #f4f0e7;
    --paper-deep: #e8e0d1;
    --gold: #e5ae42;
    --gold-soft: #f2c66e;
    --sage: #8a9b7c;
    --cream: #fffaf0;
    --muted: #686961;
    --line: rgba(16, 17, 15, .15);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2eee5;
    --ink-soft: #d9d8d0;
    --paper: #11130f;
    --paper-deep: #191c16;
    --gold: #e3ae48;
    --gold-soft: #f0c66e;
    --sage: #9bac91;
    --cream: #1e211a;
    --muted: #a4a69e;
    --line: rgba(255, 255, 255, .14);
    --surface: rgba(255, 255, 255, .035);
    --surface-hover: rgba(255, 255, 255, .075);
    --text-muted: #b6b7af;
    --text-subtle: #989a92;
    --accent-ink: #e4b755;
    --accent-strong: #edbd5b;
    --inverse-bg: #080a08;
    --inverse-panel: #171a15;
    --inverse-text: #f6f1e7;
    --inverse-muted: #a8aaa2;
    --inverse-line: rgba(255, 255, 255, .15);
    --shadow-soft: rgba(0, 0, 0, .24);
    --shadow-strong: rgba(0, 0, 0, .42);
    --focus-ring: rgba(227, 174, 72, .3);
    --success: #8fd2a4;
    --success-bg: rgba(143, 210, 164, .1);
    --error: #f0a293;
    --error-bg: rgba(240, 162, 147, .1);
  }
}

body {
  background: var(--paper);
  color: var(--ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.brand { color: var(--ink); }
.brand strong,
.hero h1 em,
.method-statement em { color: var(--accent-strong); }
.brand-mark { background: var(--inverse-bg); color: var(--gold-soft); }
.site-header nav a,
.hero-lede,
.section-heading > p,
.card-description,
.method-copy > p,
.faq-list details p,
.closing-inner p { color: var(--text-muted); }
.kicker,
.section-index { color: var(--accent-ink); }
.kicker span { background: var(--accent-ink); }
.trust-list,
.report-card li,
.proof-inner span,
.reinvestment p { color: var(--text-muted); }
.trust-list span,
.card-eyebrow,
.report-card li span,
.faq-list summary span,
.reinvestment span,
.proof-inner strong { color: var(--accent-ink); }

.report-preview {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  box-shadow: 0 34px 70px var(--shadow-strong);
}
.preview-title,
.process-grid { border-color: var(--inverse-line); }
.preview-verdict { background: var(--inverse-panel); }
.proof-strip,
.closing-section { background: var(--paper-deep); border-color: var(--line); }
.report-card { background: var(--surface); border-color: var(--line); }
.report-card:hover {
  background: var(--surface-hover);
  box-shadow: 0 22px 50px var(--shadow-soft);
}
.card-number,
.price-row span,
.site-footer > p,
.site-footer > div span { color: var(--text-subtle); }
.button-primary,
.card-action span { color: var(--gold-button-ink); }

.process-section {
  background: var(--inverse-bg);
  color: var(--inverse-text);
}
.light-heading > p,
.process-grid p { color: var(--inverse-muted); }
.process-grid,
.process-grid li + li,
.step-icon { border-color: var(--inverse-line); }
.method-copy .method-lede { color: var(--ink); }
.faq-list { border-color: var(--ink); }
.text-link,
.site-footer > div a { border-color: var(--line); }

.toast {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  border-color: var(--inverse-line);
  box-shadow: 0 24px 60px var(--shadow-strong);
}
.toast a { color: var(--inverse-text); }

@media (prefers-color-scheme: dark) {
  .ambient-one {
    background: radial-gradient(circle, rgba(227, 174, 72, .14), transparent 68%);
  }
  .ambient-two {
    background: radial-gradient(circle, rgba(155, 172, 145, .1), transparent 68%);
  }
  .report-preview::after {
    background: linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 40%);
  }
  .proof-strip,
  .closing-section { border-color: rgba(255, 255, 255, .1); }
}