/* ============================================================
   Shared design tokens + base styles.
   Every page includes this file, plus its own page-specific CSS.
   ============================================================ */

:root{
  --bg:#07080a;
  --panel: rgba(255,255,255,0.035);
  --panel-border: rgba(255,255,255,0.09);
  --text:#eef1f5;
  --text-dim:#8b93a1;
  --text-dimmer:#5b6270;
}

[data-theme="solar"]{ --accent:#ff8f3f; --accent-bright:#ffd27a; --accent-dim: rgba(255,143,63,0.14); --glow: rgba(255,143,63,0.4); }
[data-theme="void"]{ --accent:#b56bff; --accent-bright:#e3c2ff; --accent-dim: rgba(181,107,255,0.14); --glow: rgba(181,107,255,0.4); }
[data-theme="arc"]{ --accent:#3fd6ff; --accent-bright:#bff2ff; --accent-dim: rgba(63,214,255,0.14); --glow: rgba(63,214,255,0.4); }
[data-theme="stasis"]{ --accent:#7fb9ff; --accent-bright:#e4f1ff; --accent-dim: rgba(127,185,255,0.14); --glow: rgba(127,185,255,0.4); }
[data-theme="strand"]{ --accent:#3ddc84; --accent-bright:#b3ffd6; --accent-dim: rgba(61,220,132,0.14); --glow: rgba(61,220,132,0.4); }
[data-theme="prismatic"]{ --accent:#ff6fd5; --accent-bright:#ffd6f5; --accent-dim: rgba(255,111,213,0.14); --glow: rgba(255,111,213,0.4); }

/* ---------- Light mode ---------- */
[data-mode="light"]{
  --bg:#f3f4f7;
  --panel: rgba(0,0,0,0.035);
  --panel-border: rgba(0,0,0,0.12);
  --text:#15171c;
  --text-dim:#42485a;
  --text-dimmer:#767c8f;
}
/* accent-bright gets darkened per theme in light mode so text stays legible on a white background */
[data-mode="light"][data-theme="solar"]{ --accent-bright:#c9600a; }
[data-mode="light"][data-theme="void"]{ --accent-bright:#7a3fd6; }
[data-mode="light"][data-theme="arc"]{ --accent-bright:#0d84a8; }
[data-mode="light"][data-theme="stasis"]{ --accent-bright:#2f6fb0; }
[data-mode="light"][data-theme="strand"]{ --accent-bright:#1f9a5a; }
[data-mode="light"][data-theme="prismatic"]{ --accent-bright:#c23fa0; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Browsers don't inherit page fonts on form elements by default —
   without this, every button/input silently falls back to the
   OS's system UI font instead of the site's actual typefaces. */
button, input, select, textarea{ font-family: inherit; }
body{
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--accent-dim), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.display{ font-family:'Oswald', sans-serif; text-transform:uppercase; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; }

/* ---------- Top nav (injected by nav.js) ---------- */
nav.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:26px 24px; flex-wrap:wrap; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.04em;
  font-size:15px; text-decoration:none;
}
.brand-mark{
  width:10px; height:10px; background:var(--accent);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 12px var(--glow);
}
.nav-links-wrap{ position:relative; display:flex; align-items:center; gap:12px; }
.nav-links-btn{
  background:none; border:1px solid var(--panel-border); border-radius:6px;
  color:var(--text-dim); font-size:14px; line-height:1; cursor:pointer;
  padding:7px 10px; transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-links-btn:hover, .nav-links-btn:focus-visible{ border-color:var(--accent); color:var(--accent-bright); }
.nav-links-panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:50;
  display:none; flex-direction:column; min-width:180px;
  background:var(--bg); border:1px solid var(--panel-border); border-radius:10px;
  padding:8px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.5);
}
.nav-links-panel.open{ display:flex; }
.nav-links-panel a{
  display:block; padding:9px 12px; border-radius:6px;
  font-size:13.5px; color:var(--text-dim); text-decoration:none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links-panel a:hover, .nav-links-panel a:focus-visible{ background:var(--panel); color:var(--text); }
.nav-links-panel a.active{ color:var(--accent-bright); font-weight:600; }

.nav-menu-wrap{ position:relative; }
.nav-menu-btn{
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--panel-border); border-radius:6px;
  padding:6px 10px; cursor:pointer; color:var(--text-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-menu-btn:hover, .nav-menu-btn:focus-visible{ border-color:var(--accent); color:var(--accent-bright); }
.nav-menu-burger{ font-size:14px; line-height:1; }
.nav-menu-icon{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.nav-menu-icon img{ width:14px; height:14px; object-fit:contain; }

.nav-menu-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:50;
  width:220px; padding:16px;
  background:var(--bg); border:1px solid var(--panel-border); border-radius:10px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.5);
  display:none;
}
.nav-menu-panel.open{ display:block; }
.nav-menu-section-label{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-dimmer); margin-bottom:10px;
}
.nav-menu-section + .nav-menu-section{ margin-top:18px; }

.mode-switch{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:72px; height:32px; border-radius:999px; padding:0 8px;
  background:var(--panel); border:1px solid var(--panel-border);
  cursor:pointer;
}
.mode-switch-icon{
  position:relative; z-index:1; font-size:14px; line-height:1;
}
.mode-switch-thumb{
  position:absolute; top:2px; left:2px; width:28px; height:28px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--glow);
  transition: transform 0.25s ease;
}
.mode-switch-thumb.is-dark{ transform: translateX(38px); }

.element-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.element-swatch{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1; border-radius:8px; cursor:pointer;
  background:var(--panel); border:2px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.element-swatch:hover{ transform: scale(1.05); }
.element-swatch.active{ border-color:var(--text); }
.element-swatch img{ width:22px; height:22px; object-fit:contain; }

/* ---------- Local section sub-nav (per page-group header) ---------- */
.subnav{
  display:flex; justify-content:center; gap:8px; margin:26px auto 0; flex-wrap:wrap;
}
.subnav a{
  font-family:'JetBrains Mono', monospace; font-size:12px; text-decoration:none;
  color:var(--text-dim); border:1px solid var(--panel-border); background:var(--panel);
  padding:8px 16px; border-radius:999px; transition: all 0.15s ease;
}
.subnav a:hover{ color:var(--text); border-color:rgba(255,255,255,0.2); }
.subnav a.active{ color:#0b0700; background:var(--accent-bright); border-color:var(--accent-bright); font-weight:700; }

/* ---------- Hero (shared shape, page-specific size/copy) ---------- */
.hero{ max-width:760px; margin:32px auto 0; padding:0 24px; text-align:center; }
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:18px;
}
h1.title{
  font-size:clamp(34px, 6vw, 54px); line-height:1.05; font-weight:700;
  letter-spacing:0.01em; margin:0 0 18px; color:var(--text);
}
.subtitle{ color:var(--text-dim); font-size:15px; max-width:600px; margin:0 auto; }

/* ---------- Section labels ---------- */
.section-label{
  text-align:center; font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:0.18em; color:var(--accent); text-transform:uppercase; margin-bottom:22px;
}

/* ---------- Reusable elevated card shape ---------- */
.panel-card{
  border:1px solid var(--panel-border); background:var(--panel);
  border-radius:16px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.3);
}

/* ---------- Footer ---------- */
footer{
  max-width:1180px; margin:0 auto; padding:26px 24px 50px;
  border-top:1px solid var(--panel-border);
  font-size:12px; color:var(--text-dimmer); text-align:center;
}
footer a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
footer p{ max-width:560px; margin:10px auto 0; }

@media (max-width:640px){
}