/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Body ── */
body {
  font-family: var(--font-body);
  color: var(--color-on-background);
  background-color: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary-fixed);
}

/* ── Grid overlay ── */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--color-outline-variant) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-outline-variant) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.05;
}

/* ── Typography ── */
.font-headline { font-family: var(--font-headline); }
.font-body    { font-family: var(--font-body); }
.font-label   { font-family: var(--font-label); }

.display-lg {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 6vw, var(--text-display-lg));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.display-md {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 5vw, var(--text-display-md));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.headline-lg {
  font-family: var(--font-headline);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.headline-md {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 700;
}
.headline-sm {
  font-family: var(--font-headline);
  font-size: var(--text-headline-sm);
  font-weight: 700;
}
.title-lg {
  font-family: var(--font-body);
  font-size: var(--text-title-lg);
  font-weight: 600;
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 300;
  line-height: 1.7;
}
.body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}
.label-lg {
  font-family: var(--font-label);
  font-size: var(--text-label-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.label-md {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.label-sm {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ── Layout ── */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Utility text colors ── */
.text-primary        { color: var(--color-primary); }
.text-secondary      { color: var(--color-secondary); }
.text-tertiary       { color: var(--color-tertiary); }
.text-on-surface     { color: var(--color-on-surface); }
.text-on-surface-var { color: var(--color-on-surface-variant); }
.text-outline        { color: var(--color-outline); }
.text-error          { color: var(--color-error); }

/* ── Utility backgrounds ── */
.bg-surface-low     { background-color: var(--color-surface-container-low); }
.bg-surface-mid     { background-color: var(--color-surface-container); }
.bg-surface-high    { background-color: var(--color-surface-container-high); }
.bg-surface-highest { background-color: var(--color-surface-container-highest); }
.bg-surface-lowest  { background-color: var(--color-surface-container-lowest); }
.bg-surface-bright  { background-color: var(--color-surface-bright); }

/* ── Special text effects ── */
.chrome-text {
  background: linear-gradient(180deg, var(--color-on-background) 0%, var(--color-tertiary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text {
  background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.glow-text-primary {
  text-shadow: 0 0 10px rgba(255, 124, 245, 0.5);
}
.glow-text-secondary {
  text-shadow: 0 0 10px rgba(0, 238, 252, 0.5), 0 0 20px rgba(0, 238, 252, 0.3);
}

/* ── Transitions ── */
.tonal-shift { transition: background-color 0.3s ease; }

/* ── Visually 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;
}