/* shared/styles/base.css
   Minimal CSS reset + design tokens as custom properties.
   Responsive utilities. No framework. */

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

:root {
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Consolas, monospace;
  --max-w: 1140px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --radius: 6px;
}

html { font-family: var(--font-sans); line-height: 1.6; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-md); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 768px) {
  :root {
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
  }
}