/* anyconcept base
   reset, body defaults, raw typography. no components, no layout. */

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--font-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ---------- typography ----------
   raw elements are styled to match the type scale. .display is opt-in
   because the brand allows one display headline per page maximum. */

.display {
  font: var(--font-display);
  letter-spacing: var(--tracking-display);
}

h1 {
  font: var(--font-h1);
  letter-spacing: var(--tracking-h1);
}

h2 {
  font: var(--font-h2);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font: var(--font-h3);
  letter-spacing: var(--tracking-h3);
}

.body-small {
  font: var(--font-body-small);
}

.label {
  font: var(--font-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.mono {
  font: var(--font-mono);
  letter-spacing: var(--tracking-mono);
}

/* ---------- elements ---------- */
a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ---------- selection ----------
   default browser blue clashes with the dark palette. neutral white-tint
   keeps the brand restrained — no introduction of a new color. */
::selection {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

/* ---------- page-wide starfield ---------- */
.page-starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.page-starfield ~ nav,
.page-starfield ~ main,
.page-starfield ~ footer {
  position: relative;
  z-index: 1;
}