:root {
  color-scheme: dark;
  --nf-bg-900: #070b14;
  --nf-bg-800: #10182a;
  --nf-surface-700: #162238;
  --nf-surface-600: rgba(255, 255, 255, 0.04);
  --nf-surface-500: rgba(255, 255, 255, 0.06);
  --nf-text-100: #f8fbff;
  --nf-text-300: #aeb8c9;
  --nf-text-500: #74829a;
  --nf-accent-1: #00eaff;
  --nf-accent-2: #ff4fd8;
  --nf-accent-3: #7a5cff;
  --nf-font-heading: "Space Grotesk", sans-serif;
  --nf-font-body: "Inter", sans-serif;
  --nf-space-4: 0.25rem;
  --nf-space-8: 0.5rem;
  --nf-space-12: 0.75rem;
  --nf-space-16: 1rem;
  --nf-space-24: 1.5rem;
  --nf-space-32: 2rem;
  --nf-space-40: 2.5rem;
  --nf-space-48: 3rem;
  --nf-radius-12: 12px;
  --nf-radius-16: 16px;
  --nf-radius-24: 24px;
  --nf-radius-pill: 999px;
  --nf-max-width: 1180px;
  --nf-content-width: 720px;
  --nf-border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --nf-border-strong: 1px solid rgba(255, 255, 255, 0.12);
  --nf-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.2);
  --nf-theme-transition: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --nf-bg-image: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--nf-bg-900);
  color: var(--nf-text-100);
  font-family: var(--nf-font-body);
  line-height: 1.6;
}

body {
  padding: var(--nf-space-24);
  background-image:
    radial-gradient(circle at top, rgba(0, 234, 255, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(255, 79, 216, 0.05), transparent 45%);
  transition:
    background-color var(--nf-theme-transition),
    color var(--nf-theme-transition);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: var(--nf-bg-image);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

main,
.page-shell {
  width: min(100%, var(--nf-max-width));
  margin: 0 auto;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

@media (max-width: 720px) {
  body {
    padding: var(--nf-space-16);
  }
}