/* GENERATED by generate_tokens.py from brand.yaml. DO NOT EDIT BY HAND.
   Brand: Civic Works Brief | mode: light | zero LLM tokens.
   Re-run `python3 generate_tokens.py` after editing brand.yaml. */
:root {
  /* grid geometry */
  --grid-container: min(1184px, calc(100vw - (32px * 2)));
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 32px;
  --grid-baseline: 8px;
  --grid-field: calc(var(--grid-baseline) * 10);
  --grid-template: repeat(12, minmax(0, 1fr));
  --grid-col: calc((1184px - (var(--grid-gutter) * 11)) / 12);

  /* content-derived layout spans and widths */
  --layout-content-span: span 7;
  --layout-rail-span: span 3;
  --layout-wide-span: span 10;
  --layout-full-span: span 12;
  --layout-content-width: calc((var(--grid-col) * 7) + (var(--grid-gutter) * 6));
  --layout-rail-width: calc((var(--grid-col) * 3) + (var(--grid-gutter) * 2));
  --layout-wide-width: calc((var(--grid-col) * 10) + (var(--grid-gutter) * 9));
  --layout-full-width: calc((var(--grid-col) * 12) + (var(--grid-gutter) * 11));
  --layout-climax-start: 1;
  --layout-climax-end: -1;

  /* spacing rhythm */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
}