/* ============================================================ Steven Neira — Base element resets & helpers Optional: consumers get sensible defaults + a few utility classes. Theme is set via [data-theme] on or . ============================================================ */ * { box-sizing: border-box; } html { background: var(--color-bg); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--color-bg); color: var(--text-primary); font: var(--text-body); } /* The "pixel world" ambient grid — opt in with class on a container */ .ds-grid-bg { background-image: linear-gradient(var(--surface-grid) 1px, transparent 1px), linear-gradient(90deg, var(--surface-grid) 1px, transparent 1px); background-size: 32px 32px; } button, input, select, textarea { font: inherit; } a { color: var(--color-primary); } img, svg { max-width: 100%; } ::selection { background: var(--selection-bg); color: var(--text-primary); } /* Type helpers */ .t-display { font: var(--text-display); letter-spacing: var(--tracking-tight); } .t-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); } .t-h2 { font: var(--text-h2); } .t-h3 { font: var(--text-h3); } .t-body-lg { font: var(--text-body-lg); } .t-body { font: var(--text-body); } .t-caption { font: var(--text-caption); color: var(--text-muted); } .t-label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .t-code { font: var(--text-code); } .t-pixel { font: var(--text-pixel); letter-spacing: var(--tracking-pixel); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }