Create style/base.css

style/base.css

@@ -0,0 +1,146 @@
+/* ============================================================
+   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;
+}