/**
 * Layout constants: breakpoints, the z-index ladder, the grid, the icon system.
 * Z-index is a named ladder - a component never writes a raw number.
 */
:root {
  --bp-xs: 480px; /* @kind other */
  --bp-sm: 640px; /* @kind other */
  --bp-md: 768px; /* @kind other */
  --bp-lg: 1024px; /* @kind other */
  --bp-xl: 1280px; /* @kind other */
  --bp-2xl: 1536px; /* @kind other */

  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky: 1100; /* @kind other */
  --z-overlay: 1200; /* @kind other */
  --z-modal: 1300; /* @kind other */
  --z-popover: 1400; /* @kind other */
  --z-toast: 1500; /* @kind other */
  --z-tooltip: 1600; /* @kind other */

  --grid-columns: 12; /* @kind other */
  --grid-gutter: var(--space-24);
  --grid-margin: var(--space-24);

  /* icons: Lucide at 1.5px stroke for ordinary affordances; HUD marks stay bespoke */
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
  --icon-stroke: 1.5px; /* @kind other */
  --icon-stroke-hud: 1px; /* @kind other */
}

@media (max-width: 640px) {
  :root { --grid-columns: 4; /* @kind other */ --grid-gutter: var(--space-16); --grid-margin: var(--space-16); }
}
@media (min-width: 641px) and (max-width: 1023px) {
  :root { --grid-columns: 8; /* @kind other */ --grid-gutter: var(--space-20); --grid-margin: var(--space-20); }
}