/* Gateway South — Spacing, radius, shadow, motion tokens.
   The brand's shape language (see readme "Shape Theory") is hard-edged,
   intersecting rectangles — so radii stay small/near-zero, and elevation
   is conveyed by color-blocking and layered shapes, not soft shadow. */
:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius — mostly square; the brand's shapes are cut rectangles, not
     rounded ones. Small radius only on interactive controls for tap comfort. */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Border widths */
  --border-thin: 1px;
  --border-thick: 2px;
  --border-heavy: 4px;

  /* Shadow — used sparingly; brand favors flat color blocking over soft
     elevation. Reserved for floating UI (menus, modals) only. */
  --shadow-sm: 0 1px 2px rgba(16, 15, 13, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 15, 13, 0.12);
  --shadow-lg: 0 12px 32px rgba(16, 15, 13, 0.16);

  /* Motion — confident, mechanical, no bounce. Short, linear-ish eases that
     read as "built", not playful. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-sharp: cubic-bezier(0.6, 0, 0.4, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}