/* ──────────────────────────────────────────────────────────────
   Cobalt — Spacing, radius, shadow, motion
   4px base grid. Radii and spacing match the Figma Responsive collection.
   ────────────────────────────────────────────────────────────── */

:root {
  /* Spacing — 4px base scale */
  --cb-space-0:   0px;
  --cb-space-xxs: 2px;
  --cb-space-xs:  4px;
  --cb-space-sm:  8px;
  --cb-space-m:   12px;
  --cb-space-md:  16px;
  --cb-space-lg:  24px;
  --cb-space-xl:  32px;
  --cb-space-xxl: 40px;
  --cb-space-3xl: 64px;

  /* Radius */
  --cb-radius-xs:    2px;
  --cb-radius-sm:    4px;
  --cb-radius-md:    8px;
  --cb-radius-lg:    16px;
  --cb-radius-xl:    20px;
  --cb-radius-pill:  999px;

  /* Border widths */
  --cb-border-w:     1px;   /* @kind spacing */
  --cb-border-w-md:  2px;   /* @kind spacing */

  /* Elevation — soft, low-contrast shadows on near-white surfaces */
  --cb-shadow-xs: 0 1px 2px rgba(14, 15, 17, 0.04);
  --cb-shadow-sm: 0 1px 2px rgba(14, 15, 17, 0.04), 0 1px 3px rgba(14, 15, 17, 0.06);
  --cb-shadow-md: 0 2px 4px rgba(14, 15, 17, 0.04), 0 4px 12px rgba(14, 15, 17, 0.08);
  --cb-shadow-lg: 0 8px 24px rgba(14, 15, 17, 0.10), 0 2px 6px rgba(14, 15, 17, 0.06);
  --cb-shadow-pop: 0 12px 40px rgba(14, 15, 17, 0.16);
  /* Hairline as inset ring — used by cards & inputs */
  --cb-ring:       inset 0 0 0 1px var(--cb-border);
  --cb-ring-focus: 0 0 0 3px rgba(63, 113, 222, 0.18);

  /* Motion */
  --cb-ease:       cubic-bezier(0.2, 0.6, 0.2, 1);   /* @kind other */
  --cb-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --cb-dur-fast:   120ms;   /* @kind other */
  --cb-dur:        180ms;   /* @kind other */
  --cb-dur-slow:   280ms;   /* @kind other */

  /* Layout */
  --cb-rail-w:        236px;  /* @kind spacing */
  --cb-rail-w-icon:   56px;   /* @kind spacing */
  --cb-control-h-sm:  28px;   /* @kind spacing */
  --cb-control-h-md:  36px;   /* @kind spacing */
  --cb-control-h-lg:  44px;   /* @kind spacing */
}