/* base.css — reset, container, grid, base typography. Consumes tokens.css. */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font); color:var(--text-1); background:var(--bg-app);
       font-size:var(--fs-base); line-height:1.5; }
img,svg,canvas { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }

/* Centered, width-capped content — fixes widescreen over-stretch */
.app-container { width:100%; max-width:var(--container-max); margin-inline:auto;
                 padding-inline:var(--gutter); }

/* Responsive card grid: 1 → 2 → 4 columns */
.grid-cards { display:grid; gap:var(--space-4);
              grid-template-columns:1fr; }
@media (min-width:640px)  { .grid-cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .grid-cards { grid-template-columns:repeat(4,1fr); } }

/* Visually-hidden (a11y) */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0,0,0,0);white-space:nowrap;border:0; }

@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;} }