/* ============================================
   TOKENS — Design system variables & resets
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* --- TOKENS --- */
:root {
  --ff-display: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;

  /* Dark theme (default) */
  --bg: #060810;
  --bg2: #0b0d16;
  --bg3: #10121e;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.18);
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)), rgba(11,13,22,0.66);
  --glass-bg-hover: linear-gradient(145deg, rgba(107,105,255,0.11), rgba(255,255,255,0.035)), rgba(11,13,22,0.74);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-hi: rgba(107,105,255,0.28);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 44px rgba(0,0,0,0.18);
  --glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.10), 0 22px 56px rgba(0,0,0,0.24);
  --text: #eaedf8;
  --text-2: #8b91b0;
  --text-3: #4e5470;
  --accent: #3d3aff;
  --accent-2: #6b69ff;
  --accent-glow: rgba(61, 58, 255, 0.25);
  --green: #22d472;
  --amber: #f0a830;
  --red: #ff5757;
  --gold: #c4a05a;
  --rose: #e84393;
  --teal: #00b894;
  --nav-h: 68px;
}

[data-theme="light"] {
  --bg: #f4f5fb;
  --bg2: #eceef8;
  --bg3: #e2e5f4;
  --surface: rgba(0, 0, 0, 0.04);
  --border: rgba(0, 0, 0, 0.08);
  --border-hi: rgba(0, 0, 0, 0.18);
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.24)), rgba(244,245,251,0.38);
  --glass-bg-hover: linear-gradient(145deg, rgba(255,255,255,0.76), rgba(85,83,255,0.075)), rgba(244,245,251,0.48);
  --glass-border: rgba(78,84,112,0.14);
  --glass-border-hi: rgba(85,83,255,0.28);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 18px 42px rgba(17,19,32,0.08);
  --glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.92), 0 24px 54px rgba(17,19,32,0.11);
  --text: #111320;
  --text-2: #4a4f6a;
  --text-3: #8a90ab;
  --accent: #2a28e8;
  --accent-2: #5553ff;
  --accent-glow: rgba(42, 40, 232, 0.15);
  --green: #17a858;
  --amber: #d4860e;
  --red: #e03333;
  --gold: #9e7c32;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Subtle deep-space vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,0.4) 100%);
}
[data-theme="light"] body::after {
  background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 50%, rgba(0,0,0,0.06) 100%);
}

::selection {
  background: rgba(94, 92, 255, 0.4);
  color: #fff;
  text-shadow: none
}

::-moz-selection {
  background: rgba(94, 92, 255, 0.4);
  color: #fff;
  text-shadow: none
}

::-webkit-scrollbar {
  width: 3px
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

::-webkit-scrollbar-thumb {
  background: var(--accent)
}

a {
  color: inherit;
  text-decoration: none
}

button {
  cursor: pointer;
  font-family: var(--ff-body)
}

img {
  max-width: 100%
}

/* --- HEADINGS --- */
h1,
h2,
h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem)
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-bottom: 16px
}

h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  font-weight: 600
}

.lead {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.75;
  max-width: 52ch
}

/* --- DIVIDER --- */
.h-rule {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0
}

/* --- CANVAS --- */
#cvs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none
}