/* ==========================================================================
   base.css — Reset + body + primitives (aligned with v2 tokens)
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  /* Subtle aurora background */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(191, 255, 0, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(236, 72, 153, 0.03) 0%, transparent 40%);
  background-attachment: fixed;
}

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

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

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--fg);
  letter-spacing: var(--tr-heading);
}

::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Text utilities */
.t-accent { color: var(--accent); }
.t-muted  { color: var(--fg-muted); }
.t-serif  { font-family: var(--font-display); }
.t-italic { font-style: italic; }
.t-center { text-align: center; }
.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Visible / hidden (a11y) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.mobile-drawer[data-open="true"] {
  transform: translateX(0);
}

.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.mobile-drawer nav a {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-heading);
  color: var(--fg);
}

.drawer-cta {
  margin-top: auto;
}

/* Aurora background (used in hero) */
.aurora {
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(191, 255, 0, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
  filter: blur(40px);
}