/*
  THEOS — Layout & Breakpoint Tokens
  ---------------------------------------------------------------
  A 12-column grid at desktop, collapsing to 8 at tablet and 4 at
  mobile — margins grow with viewport so content never touches the
  edge of large canvases (whitespace as a design element).
*/

:root {
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;
  --bp-wide: 1920px;

  --container-max: 1280px;     /* max content width at desktop+ */
  --container-wide: 1600px;    /* full-bleed feature sections */

  --margin-mobile: 20px;
  --margin-tablet: 40px;
  --margin-desktop: 80px;

  --columns-mobile: 4; /* @kind other */
  --columns-tablet: 8; /* @kind other */
  --columns-desktop: 12; /* @kind other */
  --gutter: 24px;
}