/* Shared color palette for the "marketing" page family -- index.html,
   papers.html, paper.html, and every generated paper page (see
   scripts/build_static_pages.py's PAGE_TEMPLATE, which links this same
   file). Extracted from what used to be four copies of an identical
   inline :root block so the light AND dark values only need updating in
   one place. Each page keeps its own layout/component CSS inline as
   before -- this file is colors only.

   Dark theme is applied via [data-theme="dark"] on <html>, set by
   assets/theme.js (loaded on every page) and mirrored by a tiny inline
   snippet in each page's <head> to avoid a flash of the wrong theme. */
:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --text: #111827;
  --text-secondary: #667085;
  --text-muted: #98A2B3;
  --border: rgba(17, 24, 39, 0.08);
  --navy: #172033;
  /* Fixed (non-theme-switching) deep backdrop for the always-dark "trust"
     call-out card. --navy itself now doubles as the interactive accent
     color and turns bright blue in dark mode, which made that card's
     background go bright blue with unreadable white-on-blue text -- this
     token stays a constant dark navy in both themes so the card keeps
     looking the same regardless of site theme. */
  --deep-navy: #141B2E;
  --champagne: #B58A3A;
  --champagne-bg: #F4EBDD;
  --champagne-text: #7A5A22;
  --success: #18794E;
  --success-bg: rgba(24, 121, 78, 0.08);
  --danger: #C24141;
  --badge-partial-bg: rgba(183, 121, 31, 0.1);
  --badge-partial-text: #B7791F;
  --badge-review-bg: rgba(194, 65, 65, 0.08);
  --row-tint: rgba(17, 24, 39, 0.03);
  --row-tint-strong: rgba(17, 24, 39, 0.06);
}

/* Premium dark palette -- same tokens as assets/exam.css's dark theme
   (multiple dark surfaces, electric-blue accent), reusing the marketing
   page family's own variable names so index/papers/paper/generated pages
   stay visually consistent with the exam-flow pages instead of the two
   families drifting apart. */
[data-theme="dark"] {
  --bg: #080B12;
  --surface: #111722;
  --text: #F5F7FA;
  --text-secondary: #AAB4C3;
  --text-muted: #8795A9;
  --border: #273142;
  --navy: #3B82F6;
  --champagne: #8B5CF6;
  --champagne-bg: #221A3D;
  --champagne-text: #C4B5FD;
  --success: #34D399;
  --success-bg: #14261F;
  --danger: #F0716A;
  --badge-partial-bg: #2E2412;
  --badge-partial-text: #F0B75E;
  --badge-review-bg: #2E1A1D;
  --row-tint: rgba(255, 255, 255, 0.04);
  --row-tint-strong: rgba(255, 255, 255, 0.07);
}

/* ---- Dark-theme contrast fixes (WCAG AA 4.5:1) ----
   --navy is #3B82F6 in dark: fine as an icon/fill but too weak for white
   text on it (3.7:1) or as small text on dark surfaces (4.0:1). */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .sub-tab.active { background: #2563EB; border-color: #2563EB; color: #fff; }
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn.primary:hover,
[data-theme="dark"] .nav-cta:hover { background: #1D4ED8; color: #fff; }
[data-theme="dark"] .qcount-pill,
[data-theme="dark"] .pill,
[data-theme="dark"] .exam-card .exam-count b,
[data-theme="dark"] .cta-card h2 { color: #8DB8FF; }
[data-theme="dark"] .section-label { color: var(--champagne-text); }
[data-theme="dark"] .arrow { color: #93A0B5; }