/* ============================================================================
   HEIMDALL theme — strongstocktrading.com
   Added 2026-09-29 on Paul-direct: "all pages, self-host the fonts" +
   "site color and fonts should fall within brand colors and fonts and
   reflect the Heimdall in look".

   SOURCE OF TRUTH for every value below:
     /home/paul/Jts/.tools/agent_os/web/css/hud.css  :root
   This file does not invent a palette. It maps the site's EXISTING custom
   properties onto the HEIMDALL HUD values, so the whole site follows without
   rewriting any component CSS.

   WHY THE SITE WAS ALREADY CLOSE: it already used --blue:#3957B9,
   --navy:#080B12, --text-dim:#8396D3 and named both HEIMDALL typefaces. The
   palette was the right hue family used INVERTED — HEIMDALL colours as
   accents on a white ground. This flips the ground.

   SELF-HOSTED FONTS: 13 pages previously loaded DM Sans and JetBrains Mono
   from fonts.googleapis.com / fonts.gstatic.com and the site had ZERO
   @font-face rules. Those two external domains are now gone from every page.
   That is also why self-hosting is the right call this week specifically:
   the Google Ads review cites Compromised Site, and removing third-party
   font requests removes two domains a reviewer would otherwise have to clear.
   Files: fonts/dm-sans-var-latin.woff2 (36,932 b),
          fonts/jetbrains-mono-var-latin.woff2 (31,432 b)
   Both are variable fonts — one file covers 400..700, so 2 files not 6.
   Licences shipped alongside: fonts/OFL-DM-Sans.txt, fonts/OFL-JetBrains-Mono.txt
   (SIL Open Font License 1.1 — redistribution requires the licence travel
   with the font, which is why those two .txt files are in the deploy.)

   ACCESSIBILITY — measured, not eyeballed. WCAG contrast on #080B12:
     #e8eef8  16.89:1  AA body          <- all body copy
     #8396D3   6.81:1  AA body          <- accent TEXT, links, labels
     #22c55e   8.64:1  AA body          <- positive
     #ef4444   5.23:1  AA body          <- danger
     #f59e0b   9.16:1  AA body          <- warning
     #e6b84d  10.62:1  AA body          <- simulated/backtested marker
     #5c6b82   3.64:1  large / UI only  <- de-emphasised only, never body
     #3957B9   3.03:1  large / UI only  <- FAILS body text. Fills, borders and
                                           glow ONLY. Never set it as a text
                                           colour. #8396D3 is the accent ink.
   ============================================================================ */

/* ---------- self-hosted variable fonts ---------- */



/* ---------- HEIMDALL tokens ---------- */
:root {
  /* grounds */
  --hd-bg:           #080B12;
  --hd-panel:        #0c1220;
  --hd-block:        #0f1626;
  --hd-block-2:      #161d2e;
  /* lines */
  --hd-border:       #1a2236;
  --hd-border-soft:  #253049;
  --hd-border-dim:   #1c2940;
  /* ink */
  --hd-text:         #e8eef8;
  --hd-text-dim:     #8396D3;
  --hd-text-faint:   #5c6b82;
  /* accent — cobalt. Fills and borders only; see the contrast note above. */
  --hd-accent:       #3957B9;
  --hd-accent-hi:    #8396D3;
  --hd-accent-deep:  #1E40AF;
  --hd-accent-dim:   #1c2940;
  /* semantic */
  --hd-pos:          #22c55e;
  --hd-danger:       #ef4444;
  --hd-amber:        #f59e0b;
  --hd-sim-gold:     #e6b84d;
  /* type */
  --hd-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --hd-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- remap the site's OWN tokens onto HEIMDALL ----------
   These names are the site's existing API (css/public.css and each page's
   :root). Redefining them here is what makes every component follow.
   Loaded AFTER public.css and after each page's inline <style>, so these win
   without !important. If a page ever stops following, check the load order
   before touching a component rule. ---------------------------------------- */
:root {
  /* --- css/public.css vocabulary --- */
  --bg:         var(--hd-bg);
  --bg-card:    var(--hd-block);
  --bg-card-2:  var(--hd-block-2);
  --bg-hover:   var(--hd-border);
  --border:     var(--hd-border);
  --border-2:   var(--hd-border-soft);
  --text:       var(--hd-text);
  --text-dim:   var(--hd-text-dim);
  --text-muted: var(--hd-text-dim); /* #8396D3 — #5c6b82 is 3.64:1, not body */
  --green:      var(--hd-pos);
  --green-dim:  #16a34a;
  --red:        var(--hd-danger);
  --red-dim:    #dc2626;
  --amber:      var(--hd-amber);
  --blue:       var(--hd-accent);
  --blue-dim:   var(--hd-accent-deep);
  --cyan:       var(--hd-accent-hi);
  --purple:     var(--hd-accent);
  --gold:       var(--hd-sim-gold);
  --navy:       var(--hd-bg);
  --mono:       var(--hd-mono);
  --sans:       var(--hd-sans);

  /* --- sst-landing.php / terms / privacy / refund vocabulary --- */
  --main:        var(--hd-text);
  --ink:         var(--hd-text);
  --accent:      var(--hd-accent);
  --panel:       var(--hd-block);
  --dark-panel:  var(--hd-block-2);
  --secondary:   var(--hd-text-dim);
  --muted:       var(--hd-text-dim);
  --focus:       var(--hd-accent-hi);
  --on-dark:     var(--hd-text);
}

/* ---------- the ground itself ---------- */
html { color-scheme: dark; }
html, body {
  background: var(--hd-bg);
  color: var(--hd-text);
  font-family: var(--hd-sans);
}

/* A light-theme site inverted to dark leaves hardcoded #fff / #000 islands.
   These catch the common ones without hunting every component. */
body [style*="background:#fff" i],
body [style*="background: #fff" i],
body [style*="background-color:#fff" i],
body [style*="background-color: #fff" i] { background: var(--hd-block) !important; }
body [style*="color:#000" i],
body [style*="color: #000" i],
body [style*="color:#111" i],
body [style*="color:#1a1a1a" i] { color: var(--hd-text) !important; }

/* ---------- panels and cards read as HUD blocks ---------- */
.card, .panel, .stat, .stat-box, .box, .tile, .block, table, pre, blockquote {
  background: var(--hd-block);
  border-color: var(--hd-border);
  color: var(--hd-text);
}
hr { border-color: var(--hd-border); }

/* ---------- accent ink, never accent text-on-ground ---------- */
a { color: var(--hd-accent-hi); }
a:hover { color: var(--hd-text); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--hd-accent-hi);
  outline-offset: 2px;
}

/* ---------- monospace carries data, as it does in the HUD ---------- */
code, kbd, samp, pre, .mono, .stat-val, .tl-title, time, .ticker, .price {
  font-family: var(--hd-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- primary actions (no brand glow) ---------- */
.btn-primary, .cta, button[type="submit"], input[type="submit"] {
  background: var(--hd-accent);
  border: 1px solid var(--hd-accent-hi);
  color: var(--hd-text);
}
.btn-primary:hover, .cta:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
  border-color: var(--hd-text);
}

/* --------- form fields on a dark ground ---------- */
input, select, textarea {
  background: var(--hd-panel);
  border: 1px solid var(--hd-border-soft);
  color: var(--hd-text);
}
input::placeholder, textarea::placeholder { color: var(--hd-text-dim); /* #8396D3, not #5c6b82 */ }

/* ---------- the four-box state palette, straight from hud.css ----------
   Kept because it already mirrors the operator's own RUNNING /
   ENABLED-BUT-IDLE / DISABLED / BROKEN vocabulary. */
.state-running  { color: #3957B9; background: rgba(57, 87, 185, 0.18); }
.state-idle     { color: #f59e0b; background: rgba(245, 158, 11, 0.14); }
.state-disabled { color: #6b7280; background: rgba(107, 114, 128, 0.14); }
.state-broken   { color: #ef4444; background: rgba(239, 68, 68, 0.14); }

/* ---------- simulated vs live, because the site must never blur them ----------
   The Google Ads "Unreliable claims" finding was a backtested figure styled
   identically to a live one. Give simulated numbers their own colour so the
   distinction survives a skim. */
.simulated, .backtested, .phantom { color: var(--hd-sim-gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- shared chrome, 2026-10-03 ----------
   Layout language from valkyrie-polish.css, which the 8787 page loads
   after hud.css. Catches light islands that are not CSS variables
   (navbar white, story #fff cards, methodology white hero wash). */
.navbar,
header.site-header,
.site-nav,
.m-navbar {
  background: linear-gradient(180deg, rgba(15, 22, 38, 0.92), rgba(8, 11, 18, 0.88));
  border-bottom: 1px solid #1c2940;
  color: #e8eef8;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-links.open,
.site-nav .open {
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.98), rgba(8, 11, 18, 0.94));
}
.nav-links a,
.site-nav a,
header.site-header a {
  color: #8396D3;
}
.nav-links a:hover,
.site-nav a:hover,
header.site-header a:hover {
  color: #e8eef8;
}
.card,
.cta-box,
.callout,
.stat-box,
.agent-card,
.factor-card,
.method-toc,
.proof-table,
.tv-wrap,
.tv-empty,
.movers-table-wrap,
.members-gate {
  background: #0f1626;
  color: #e8eef8;
  border-color: #1c2940;
  border-radius: 10px;
}
.story-section .callout,
.story-section:nth-child(even) .callout {
  background: #0f1626;
  color: #e8eef8;
}
.method-hero::before {
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.35) 0%, rgba(12, 18, 32, 0.92) 100%);
}
.method-section:nth-child(even) {
  background: #0c1220;
}
.footer,
.site-footer {
  background: #080B12;
  color: #8396D3;
  border-top: 1px solid #1c2940;
}