/* 21°AC spacing, radii, focus, rail + motion tokens — brand guidelines §06/§08.
   8px grid: multiples of 8 for margins, padding, gaps; 4px for fine UI adjustments.
   NO drop shadows anywhere in the system — flat colour (Deep Chill / navy steps) creates depth. */

:root {
  /* Spacing (8px grid) */
  --space-1: 4px;    /* fine adjustment */
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Corner radii — rounded caps echo the wordmark terminals */
  --radius-s: 8px;    /* inputs, small controls */
  --radius-m: 12px;   /* cards */
  --radius-l: 16px;   /* large panels */
  --radius-pill: 999px;  /* buttons, rail segments, badges */

  /* Borders */
  --border-w: 1px;
  --border-w-strong: 2px;

  /* Focus — 2px cyan outline */
  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset: 2px;

  /* The rail — thickness tokens + ring geometry (§06) */
  --rail-compact: 4px;
  --rail-default: 8px;
  --rail-hero: 20px;          /* 16–24px hero range */
  --rail-ring-ratio: 2.375;   /* @kind other */ /* ring diameter = 2.375 × rail thickness */
  --rail-setpoint: 42%;       /* ring position along the rail */

  /* Motion — calm, engineered; respect reduced motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms;  /* @kind other */
  --duration-base: 200ms;  /* @kind other */
  --duration-slow: 400ms;  /* @kind other */
}