/* ─── Sentry0 dark + gold theme ───────────────────────────────────────────────
 * Additive overlay loaded AFTER styles.css (only on the sentry0 branch). styles.css
 * stays untouched so it keeps merging cleanly from main. Strategy:
 *   1. Self-host Inter / Spline Sans / Spline Sans Mono (matches sentry0.ai).
 *   2. Redefine the structural :root vars to dark + the brand accent to gold. We set
 *      the gold accent HERE (not only via the middleware's injected palette) so the
 *      theme is self-contained — it renders correctly even in plain `wrangler dev`
 *      (default brand = no injection).
 *   3. CSS vars inherit, so re-asserting the LIGHT document palette scoped to
 *      `.report-doc` re-lights the whole printable report subtree in one block —
 *      keeping both PDF paths readable on white. (The /api/report-pdf PDF inlines
 *      only styles.css, so it is already light; this fixes the on-screen preview.)
 *   4. `--rt-black` doubles as text AND as a few dark surfaces; we flip it to light
 *      (text) and override the 4 surface usages explicitly.
 * Palette source: sentry0.ai — bg #0A0A0A, accent gold #F2BE4A, Inter/Spline Sans.
 */

/* 1 ── Fonts (variable woff2, latin subset, same-origin → load in the PDF too) */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans";
  src: url("/assets/fonts/SplineSans.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/SplineSansMono.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

/* 2 ── Dark structural palette + gold accent */
:root {
  /* surfaces (page → section → card, increasing lightness for depth) */
  --rt-bg: #0a0a0a;
  --rt-bg-soft: #121317;
  --rt-border: #2a2d34;
  /* text (was near-black; now light) */
  --rt-black: #f4f4f5;
  --rt-ink: #e7e7e9;
  --rt-gray: #a3a99d;       /* muted, sage-tinted to echo sentry0.ai #A8AF9F */
  --rt-gray-mid: #7e837a;
  --rt-gray-light: #5b5f57;
  /* brand accent = gold (matches the middleware-injected sitePalette) */
  --rt-red: #f2be4a;
  --rt-red-dark: #d9a52f;
  --rt-red-soft: #211b0b;   /* dark gold tint */
  --rt-accent: #f2be4a;
  --brand-logo-height: 20px; /* header logo — wide "SENTRY" wordmark (~13.7:1) */
  /* status colours retuned for a dark background */
  --pass: #5ec27d; --pass-bg: #122017;
  --warn: #e6a23c; --warn-bg: #271f10;
  --fail: #ff6b6b; --fail-bg: #2a1517;
  --info: #5aa9e6; --info-bg: #0f1f2c;
  /* typography */
  --rt-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --rt-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Display headings → Spline Sans (the site's display face) */
.hero h1,
.info > .container > h2,
.results-header h2,
.cta-inner h2,
.card-header h3,
.card-primary h3,
.benchmark-card h3,
.lead-gate h2,
.report-area-title,
.footer-brand strong {
  font-family: "Spline Sans", var(--rt-sans);
}
/* Techy mono eyebrows */
.eyebrow, .section-eyebrow { font-family: "Spline Sans Mono", var(--rt-mono); }

/* 3 ── Re-light the printable report document (vars inherit into the subtree).
 *      Keep --rt-red / --rt-accent gold so the report keeps the brand accent. */
.report-doc {
  --rt-bg: #ffffff;
  --rt-bg-soft: #f6f6f4;
  --rt-border: #e6e7e6;
  --rt-black: #141414;
  --rt-ink: #1a1a1a;
  --rt-gray: #5a5a5a;
  --rt-gray-mid: #949494;
  --rt-gray-light: #c8c8c8;
  --rt-red-soft: #fbf6e9;
  --pass: #1f7a3f; --pass-bg: #e8f4ec;
  --warn: #a8590b; --warn-bg: #fbf2e1;
  --info: #1d4f8b; --info-bg: #e3edf8;
  --fail: #c0392b; --fail-bg: #fdeceb;
  color: var(--rt-black);
}

/* 4 ── Override the hardcoded #fff surfaces (chrome) + the 4 --rt-black surfaces */
.site-header { background: #0c0d10; }
.hero { background: var(--rt-bg); }
.info { background: #0d0e11; }
.input-group { background: #15161b; }
.advanced input,
.lead-field input { background: #15161b; color: var(--rt-black); }
.card { background: #1a1c22; }
.cookie-banner { background: #15161b; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
.record-block { background: #16181d; border: 1px solid var(--rt-border); }
.mx-prio { background: var(--rt-accent); color: #0a0a0a; }
.site-footer { background: #060709; color: var(--rt-gray); }

/* Gold buttons need dark text/spinner for contrast (gold is light) */
.btn-primary { color: #0a0a0a; }
.btn-primary .spinner { border-color: rgba(0, 0, 0, 0.3); border-top-color: #0a0a0a; }
.cookie-accept { color: #0a0a0a; }
.btn-secondary { border-color: rgba(244, 244, 245, 0.4); }
.btn-secondary:hover { background: var(--rt-accent); color: #0a0a0a; border-color: var(--rt-accent); }

/* Errors must read as errors (red), not the gold brand tint */
.error-banner, .lead-error {
  background: var(--fail-bg);
  color: var(--fail);
  border-left-color: var(--fail);
}

/* Inline code in the info section → brighter gold on the dark surface */
.info-grid code { color: var(--rt-accent); }

/* Header brand: the official white+gold "SENTRY" logo (.brand-logo from styles.css
   sizes it via --brand-logo-height). It's a wide wordmark, so shrink it on small
   screens (overrides styles.css's mobile .brand-logo height). */
@media (max-width: 768px) { .brand-logo { height: 17px; } }
@media (max-width: 480px) { .brand-logo { height: 15px; } }