:root {
  /* Spacing scale */
  --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 */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* Borders */
  --border-hairline: 1px solid var(--tdl-border);
  --border-dashed: 1px dashed #cfcfca; /* @kind other */

  /* Shadows — the system is flat; elevation is a hairline border, not a drop shadow.
     A single soft shadow exists for floating surfaces (dialog, toast, tooltip). */
  --shadow-none: none;
  --shadow-float: 0 18px 50px -12px rgba(17,17,17,0.22);
  --shadow-tooltip: 0 8px 24px -6px rgba(17,17,17,0.30);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 0.18s; /* @kind other */
  --dur-med: 0.3s; /* @kind other */
}