/* OGDC — Spacing, radius, borders, shadow, layout
   Airy, aligned, precise. Anchor everything to the same left margin;
   let whitespace — not rules or boxes — separate ideas.
   Corners stay crisp: 4px on controls, 8px on cards. Shadow only when raised. */
:root {
  /* Spacing scale (4px base rhythm) */
  --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 — crisp, restrained */
  --radius-control: 4px; /* buttons, inputs, chips */
  --radius-card: 8px;    /* cards, panels, tiles */
  --radius-pill: 999px;  /* status dots / small pills only */

  /* Borders */
  --border-width: 1px;
  --border-hairline-rule: var(--border-width) solid var(--stone-300);

  /* Shadow — only when an element is genuinely raised */
  --shadow-raised: 0 1px 2px rgba(12,31,63,0.06), 0 8px 24px rgba(12,31,63,0.08);
  --shadow-overlay: 0 12px 40px rgba(12,31,63,0.16);

  /* Layout grid */
  --container-max: 1240px; /* centred container */
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 24px;
  --page-margin: 32px;

  /* Motion — quiet and even, no bounces */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}