/* ============================================================
   VordScan — VORDIUM/VORTEX Theme (Vercel-inspired, brand-blue)
   Central token system + light/dark. Tokens are scoped under
   :root[data-theme="…"] so they override each page's inline
   :root{} block by specificity — no per-page palette rewrite.
   Accent = blue #3B82F6. No purple. No emoji. Self-hosted fonts.
   ============================================================ */

/* ---- 1. Self-hosted variable fonts (no CDN) ---- */
@font-face{font-family:'Geist';src:url('/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* ---- 2. Color tokens ---- */
/* LIGHT (default + explicit) */
:root,
:root[data-theme="light"]{
  --bg:#ffffff; --bg-subtle:#fafafa; --surface:#ffffff; --surface2:#f6f6f6;
  --border:#eaeaea; --border-dark:#d9d9d9; --border-strong:#d9d9d9;
  --text:#000000; --muted:#666666; --muted2:#8f8f8f;
  --blue:#3B82F6; --blue-dark:#2f74e6; --blue-text:#3B82F6;
  --blue-bg:rgba(59,130,246,.08); --blue-border:rgba(59,130,246,.25);
  --accent:#3B82F6; --accent-hover:#2f74e6; --accent-soft:rgba(59,130,246,.08);
  /* market data only */
  --green:#16a34a; --green-dark:#15803d; --green-light:#16a34a; --green-text:#16a34a;
  --green-bg:rgba(22,163,74,.10); --green-border:rgba(22,163,74,.25);
  --red:#dc2626; --red-dark:#b91c1c;
  --red-bg:rgba(220,38,38,.10); --red-border:rgba(220,38,38,.25);
  /* de-purpled / de-pinked -> blue */
  --purple:#3B82F6; --purple-bg:rgba(59,130,246,.08); --purple-bdr:rgba(59,130,246,.25);
  --pink:#3B82F6; --pink-bg:rgba(59,130,246,.08); --pink-border:rgba(59,130,246,.25);
  /* status amber (kept for pending/warn, not decoration) */
  --orange:#b45309; --yellow:#b45309; --yellow-text:#b45309;
  --yellow-bg:rgba(245,158,11,.10); --yellow-bdr:rgba(245,158,11,.30); --yellow-border:rgba(245,158,11,.30);
  --pending-bg:rgba(245,158,11,.10);
  --grid-dot:rgba(0,0,0,.05); --nav-bg:rgba(255,255,255,.72);
  --sans:'Geist', Inter, system-ui, -apple-system, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
/* DARK */
:root[data-theme="dark"]{
  --bg:#000000; --bg-subtle:#0a0a0a; --surface:#0a0a0a; --surface2:#111111;
  --border:#1f1f1f; --border-dark:#2e2e2e; --border-strong:#2e2e2e;
  --text:#ededed; --muted:#a1a1a1; --muted2:#7d7d7d;
  --blue:#3B82F6; --blue-dark:#5b9bff; --blue-text:#3B82F6;
  --blue-bg:rgba(59,130,246,.12); --blue-border:rgba(59,130,246,.25);
  --accent:#3B82F6; --accent-hover:#5b9bff; --accent-soft:rgba(59,130,246,.12);
  --green:#22c55e; --green-dark:#16a34a; --green-light:#4ade80; --green-text:#22c55e;
  --green-bg:rgba(34,197,94,.12); --green-border:rgba(34,197,94,.25);
  --red:#ef4444; --red-dark:#dc2626;
  --red-bg:rgba(239,68,68,.12); --red-border:rgba(239,68,68,.25);
  --purple:#3B82F6; --purple-bg:rgba(59,130,246,.12); --purple-bdr:rgba(59,130,246,.25);
  --pink:#3B82F6; --pink-bg:rgba(59,130,246,.12); --pink-border:rgba(59,130,246,.25);
  --orange:#f59e0b; --yellow:#f59e0b; --yellow-text:#f59e0b;
  --yellow-bg:rgba(245,158,11,.12); --yellow-bdr:rgba(245,158,11,.28); --yellow-border:rgba(245,158,11,.28);
  --pending-bg:rgba(245,158,11,.12);
  --grid-dot:rgba(255,255,255,.045); --nav-bg:rgba(0,0,0,.72);
}

/* ---- 3. Base element theming (safe, token-driven) ---- */
html{background:var(--bg);}
body{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,h4,h5,h6{letter-spacing:-.03em;line-height:1.05;}
code,pre,kbd,samp{font-family:var(--mono);font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--accent-soft);color:var(--text);}

/* Nav: translucent + blur + hairline bottom border (enhances nav.js bar) */
.vsc-nav{
  background:var(--nav-bg)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border)!important;
}

/* Hero keeps the SAME animation in both modes. In light mode the animated
   canvas is inverted so its background reads white (dark veins on white),
   instead of the dark-on-black used in dark mode. */
:root[data-theme="light"] .hero canvas{filter:invert(1) hue-rotate(180deg);}

/* ---- 4. Theme toggle control (injected by theme.js) ---- */
.vsc-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border-dark);
  color:var(--text);cursor:pointer;padding:0;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.vsc-theme-toggle:hover{background:var(--border);border-color:var(--blue);
  box-shadow:0 0 20px rgba(59,130,246,.10);}
.vsc-theme-toggle svg{width:16px;height:16px;display:block;}
.vsc-theme-toggle .icon-sun{display:none;}
.vsc-theme-toggle .icon-moon{display:block;}
:root[data-theme="dark"] .vsc-theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .vsc-theme-toggle .icon-moon{display:none;}
/* fixed fallback placement when no nav is present */
.vsc-theme-toggle.vsc-theme-fixed{position:fixed;top:12px;right:16px;z-index:9999;}

/* ---- 5. Optional spec-accurate button (for new markup) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;
  border-radius:8px;font-size:14px;font-weight:500;line-height:1;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);position:relative;overflow:hidden;transition:all .3s;text-decoration:none;cursor:pointer}
.btn::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.15),transparent 60%)}
.btn:hover{background:var(--surface2);border-color:var(--border-strong);box-shadow:0 0 24px rgba(59,130,246,.1)}
.btn:hover::before{opacity:1}
.btn-primary{font-weight:600}

/* ---- 6. Motion guard ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}