/* Optimized — spacing, radii, borders, elevation, motion. */

:root {
  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii (from mockup: card 14, icon tile 11, pill full, control 8) */
  --radius-card: 14px;
  --radius-tile: 11px;
  --radius-control: 8px;
  --radius-pill: 999px;

  /* Borders — hairline everywhere */
  --border-width: 1px;
  --hairline: 1px solid var(--border-hairline);

  /* Elevation — flat by default; one whisper of shadow for hover lift + overlays */
  --shadow-none: none;
  --shadow-hover: 0 1px 2px rgb(28 28 26 / 0.04), 0 4px 12px rgb(28 28 26 / 0.06);
  --shadow-overlay: 0 4px 12px rgb(28 28 26 / 0.08), 0 16px 40px rgb(28 28 26 / 0.14);

  /* Motion — quiet, quick */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
}