styles/base.css

/* ============================================================
   GLASSGRID — BASE STYLES
   Resets, typography foundation, global defaults.
   No component-specific styles. No colors (use tokens).
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font: var(--text-body);
  font-family: var(--font-family-base);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  min-height: 100vh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background ambient glow effect */
body::before {
  content: '';
  position: fixed;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--color-accent-primary) 0%, transparent 70%);
  opacity: 0.06;
  pointer-events: none;
  z-index: var(--z-base);
  filter: blur(var(--blur-2xl));
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -20%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, var(--color-accent-secondary) 0%, transparent 70%);
  opacity: 0.05;
  pointer-events: none;
  z-index: var(--z-base);
  filter: blur(var(--blur-2xl));
}

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
  appearance: none;
}

button {
  cursor: pointer;
  user-select: none;
}

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

ul, ol {
  list-style: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-glass-border-md);
  border-radius: var(--radius-full);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-interactive-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: rgba(168, 85, 247, 0.3);
  color: var(--color-text-primary);
}

/* Typography utilities */
.text-display    { font: var(--text-display); letter-spacing: var(--letter-spacing-tight); }
.text-heading    { font: var(--text-heading); letter-spacing: var(--letter-spacing-tight); }
.text-subheading { font: var(--text-subheading); }
.text-body       { font: var(--text-body); }
.text-caption    { font: var(--text-caption); }
.text-micro      { font: var(--text-micro); }

.text-primary    { color: var(--color-text-primary); }
.text-secondary  { color: var(--color-text-secondary); }
.text-tertiary   { color: var(--color-text-tertiary); }
.text-muted      { color: var(--color-text-muted); }
.text-accent     { color: var(--color-text-accent); }
.text-gradient {
  background: var(--color-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Spacing utilities */
.mt-auto   { margin-top: auto; }
.mb-auto   { margin-bottom: auto; }
.ml-auto   { margin-left: auto; }
.mr-auto   { margin-right: auto; }
.mx-auto   { margin-left: auto; margin-right: auto; }

/* Display utilities */
.hidden    { display: none !important; }
.sr-only   {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}