/* Dark Mode Layer (non-destructive): appends to your existing CSS */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff;--surface:#f7f8fb;--elev:#ffffff;
  --text:#0b1220;--muted:#667085;--border:#e5e7eb;
  --link:#2563eb;--link-hover:#1e40af;
  --primary:var(--brand);--primary-contrast:#ffffff;
  --accent:#22c55e;--hero-overlay:rgba(12,18,33,.30);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0f1a;--surface:#0f172a;--elev:#111827;
  --text:#e5e7eb;--muted:#9ca3af;--border:#1f2937;
  --link:#93c5fd;--link-hover:#bfdbfe;
  --primary:var(--brand);--primary-contrast:#0b0f1a;
  --accent:#34d399;--hero-overlay:rgba(0,0,0,.55);
  --shadow:0 2px 8px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){color-scheme:dark;--bg:#0b0f1a;--surface:#0f172a;--elev:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:#1f2937;--link:#93c5fd;--link-hover:#bfdbfe;--primary:var(--brand);--primary-contrast:#0b0f1a;--accent:#34d399;--hero-overlay:rgba(0,0,0,.55);--shadow:0 2px 8px rgba(0,0,0,.35);}
}
/* Global surfaces */
html,body{background:var(--bg);color:var(--text);}
/* Links */
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em;}
a:hover{color:var(--link-hover);}
/* Subtle surfaces */
header, .header, .topbar{background:var(--surface);border-bottom:1px solid var(--border);}
footer, .footer{background:var(--surface);border-top:1px solid var(--border);}
/* Cards */
.card,.panel,.box,.feature,.cta{background:var(--elev);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text);}
/* Buttons */
.button,.btn,button,input[type="button"],input[type="submit"]{border:1px solid var(--border);background:var(--elev);color:var(--text);}
.btn-primary,.button.primary{background:var(--primary);color:var(--primary-contrast);border-color:transparent;}
.btn-outline,.button.outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-ghost,.button.ghost{background:transparent;color:var(--link);border-color:transparent;}
/* Forms */
input,select,textarea{background:var(--elev);color:var(--text);border:1px solid var(--border);}
input::placeholder,textarea::placeholder{color:var(--muted);}
/* Tables/dividers */
hr{border:none;border-top:1px solid var(--border);}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--border);padding:.65rem .75rem;}
th{background:var(--surface);color:var(--text);}
/* Navigation: remove boxes */
.nav, nav ul{background:transparent!important;border:none!important;box-shadow:none!important;}
.nav a, nav a{color:var(--text);padding:.5rem .75rem;border-bottom:2px solid transparent;}
.nav a:hover, nav a:hover{color:var(--link);border-bottom-color:color-mix(in oklab,var(--link) 50%, transparent);}
.nav a.active, nav a[aria-current="page"]{color:var(--link);border-bottom-color:var(--link);}
/* Hero overlay opt-in */
.hero{position:relative;overflow:hidden;color:var(--text);}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-overlay);pointer-events:none;}
.hero>*{position:relative;z-index:1;}

/* --- Region pills (global) --- */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:.5rem 0 0}
.pill{display:inline-block;padding:.35rem .65rem;border-radius:999px;border:1px solid var(--border, rgba(0,0,0,.08));background:var(--panel-2, rgba(0,0,0,.03));font-size:.9rem;line-height:1.2}



/* === Global Site Background (Light/Dark aware) === */
:root,:root[data-theme="light"]{
  --bg-pattern-image: url("../bg/bg-tech-light.svg");
}
:root[data-theme="dark"]{
  --bg-pattern-image: url("../bg/bg-tech-dark.svg");
}

/* Apply layered background site-wide */
html, body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(900px 520px at 110% 0%, rgba(34,197,94,.06), transparent 65%),
    var(--bg-pattern-image);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 1200px 600px, 900px 520px, 320px 320px;
  background-position: 0 0, 100% 0, 0 0;
}

/* Keep content readable on top of pattern */
main, .section, .container, .page, .content {
  background: transparent;
  backdrop-filter: none;
}

/* Optional: subtle overlay inside sections to ensure contrast where needed */
.section.has-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0));
}
:root[data-theme="dark"] .section.has-overlay::before {
  background: linear-gradient(to bottom, rgba(2,6,23,.50), rgba(2,6,23,0));
}

/* Avoid fixed backgrounds on mobile for perf */
@media (min-width: 1024px){
  body {
    background-attachment: scroll, scroll, scroll;
  }
}



/* === Global Site Background v2: Fiber-Optic Beams === */
:root,:root[data-theme="light"]{
  --bg-fiber-overlay: url("../bg/bg-fiber-light.svg");
}
:root[data-theme="dark"]{
  --bg-fiber-overlay: url("../bg/bg-fiber-dark.svg");
}

/* Put fiber overlay on top of soft brand glows */
html, body {
  background-color: var(--bg);
  background-image:
    var(--bg-fiber-overlay),
    radial-gradient(1200px 600px at 10% -10%, rgba(37,99,235,.05), transparent 60%),
    radial-gradient(900px 520px at 110% 0%, rgba(34,197,94,.05), transparent 65%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, 1200px 600px, 900px 520px;
  background-position: center -40px, 0 0, 100% 0;
}

/* Optional intensity helpers */
.intensity-boost html, .intensity-boost body { background-position: center -100px, 0 0, 100% 0; }



/* === Fiber Optic Variables === */
:root,:root[data-theme="light"]{
  --fiber-blue: rgba(37,99,235,.35);
  --fiber-green: rgba(34,197,94,.28);
  --fiber-node: rgba(37,99,235,.22);
  --fiber-stroke-width: 2.4;
  --fiber-max-beams: 6;
  --fiber-packets-per-beam: 2;
}
:root[data-theme="dark"]{
  --fiber-blue: rgba(96,165,250,.70);
  --fiber-green: rgba(52,211,153,.55);
  --fiber-node: rgba(96,165,250,.35);
  --fiber-stroke-width: 2.8;
  --fiber-max-beams: 6;
  --fiber-packets-per-beam: 2;
}

/* Container style for injected overlay (fallback if inline styles fail) */
#fiber-overlay{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Ensure content stacks above */
body > * { position: relative; z-index: 1; }



/* === Dark Mode Contrast Fixes (Global) === */
/* Define ink tokens used across components */
:root,:root[data-theme="light"]{
  --ink-0:#0b1220;      /* primary text (light theme) */
  --ink-1:#1f2937;      /* secondary text */
  --ink-muted:#667085;  /* muted text */
}
:root[data-theme="dark"]{
  --ink-0:#f8fafc;      /* primary text (dark theme) */
  --ink-1:#e5e7eb;      /* secondary text */
  --ink-muted:#94a3b8;  /* muted text */
  --border:#263242;     /* slightly brighter borders in dark */
}

/* Ensure base text color is set via variables */
html, body { color: var(--text, var(--ink-0)); }

/* Flip most textual elements to light color in dark mode, regardless of older light-theme styles */
:root[data-theme="dark"] :where(h1,h2,h3,h4,h5,h6,p,li,span,em,strong,small,blockquote,figcaption,dt,dd,label,code,kbd,mark,th,td){
  color: var(--ink-0) !important;
}

/* Links retain brand color in dark mode for contrast and recognizability */
:root[data-theme="dark"] a { color: var(--link) !important; }
:root[data-theme="dark"] a:hover { color: var(--link-hover) !important; }

/* Muted text variants in dark mode */
:root[data-theme="dark"] .muted, :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .subtle {
  color: var(--ink-muted) !important;
}

/* Buttons, badges, and pills should rely on their own component styles, not be forced white */
:root[data-theme="dark"] :where(.btn,.badge,.chip,.tag,.pill){ color: inherit !important; }

/* Hero subtitle had a hard-coded slate color; correct it in dark */
:root[data-theme="dark"] .hero-subtitle{ color: #cbd5e1 !important; }

/* Tables and borders */
:root[data-theme="dark"] :where(hr, .divider){ border-color: var(--border) !important; }
:root[data-theme="dark"] table{ color: var(--ink-0) !important; }
:root[data-theme="dark"] th, :root[data-theme="dark"] td{ border-color: var(--border) !important; }



/* === About: Coverage card contrast (Dark mode) === */
:root[data-theme="dark"] #coverage .hg-card{
  background: rgba(15,23,42,.72) !important; /* slate-900 with transparency */
  border: 1px solid rgba(148,163,184,.18) !important; /* slate-300 @ low alpha */
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
:root[data-theme="dark"] #coverage .hg-card .hg-text{ color:#cbd5e1 !important; }
:root[data-theme="dark"] #coverage .hg-card .hg-muted{ color:#a1a1aa !important; }
:root[data-theme="dark"] #coverage .hg-map-caption{
  border-top: 1px solid rgba(148,163,184,.16) !important;
  color: #cbd5e1 !important;
}

/* Pills / badges in dark mode: use translucent fill and outline for contrast */
:root[data-theme="dark"] .hg-pill{
  background: rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(148,163,184,.28) !important;
}



/* === Dark mode focus ring (forms) === */
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus{
  border-color: var(--primary) !important;
  outline: none !important;
  /* brighter ring for dark backgrounds */
  box-shadow: 0 0 0 3px rgba(96,165,250,0.28) !important; /* ~tailwind sky-400 */
}

/* Utility: stronger ring if you add .focus-strong on the element */
:root[data-theme="dark"] .focus-strong:focus{
  box-shadow: 0 0 0 4px rgba(96,165,250,0.34) !important;
}

/* Optional: control ambient movers via CSS variable (not used directly in JS yet) */
:root,:root[data-theme="light"]{ --fiber-ambient-per-beam: 2; }
:root[data-theme="dark"]{ --fiber-ambient-per-beam: 2; }