/* base.css - CSS Reset, Base Typography, and Backgrounds */

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

html, body {
  height: 100%;
  background-color: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  /* Subtle dot grid at low opacity acting as coordinate grid */
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px);
  background-size: var(--space-16) var(--space-16);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
}

p, ul, ol, dl, blockquote {
  margin-bottom: var(--space-16);
}

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

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

/* Base Typographic Utility Classes */
.text-display-lg { font-size: var(--font-size-display-lg); line-height: var(--line-height-display); font-weight: var(--font-weight-bold); letter-spacing: -0.04em; }
.text-display-sm { font-size: var(--font-size-display-sm); line-height: var(--line-height-display); font-weight: var(--font-weight-bold); letter-spacing: -0.03em; }
.text-heading-lg { font-size: var(--font-size-heading-lg); line-height: var(--line-height-heading); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; }
.text-heading-sm { font-size: var(--font-size-heading-sm); line-height: var(--line-height-heading); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }

.text-body { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); }
.text-body-sm { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); }

.text-label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-tracked); text-transform: uppercase; }
.text-label-sm { font-size: var(--font-size-label-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-tracked); text-transform: uppercase; }

.text-mono { font-family: var(--font-family-mono); font-size: var(--font-size-mono); font-weight: var(--font-weight-regular); }

/* Colors */
.color-primary { color: var(--text-primary); }
.color-secondary { color: var(--text-secondary); }
.color-tertiary { color: var(--text-tertiary); }
.color-accent { color: var(--accent-mark); }
.color-inverted { color: var(--text-inverted); }