/* Responsive website tokens, reset and element defaults. */
:root {
  --gradient-hero: linear-gradient(160deg, #0a0e1a 0%, #111d3a 40%, #0a0e1a 100%);
  --text-primary: #f0f2f8;
  --purple-dim: rgba(123, 97, 255, 0.12);
  --red-dim: rgba(255, 107, 107, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 120%; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  --accent: var(--green);
  --accent-dim: var(--green-dim);
}

h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height: 1.25; color: var(--text-primary); }
p + p { margin-top: 0.9em; }
strong { color: var(--text-primary); font-weight: 600; }
em { color: var(--text-primary); font-style: italic; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
img, svg, video { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }