/* Clear Plan — spacing, radii, shadows, borders.
   4px base grid. Generous whitespace is a brand feature. */

:root {
  /* Spacing (4px grid) */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — calm, moderate rounding; pill reserved for tags & toggles */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadows — soft, low, never dramatic */
  --shadow-xs: 0 1px 2px rgba(19, 28, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(19, 28, 23, 0.05), 0 2px 8px rgba(19, 28, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(19, 28, 23, 0.05), 0 8px 24px rgba(19, 28, 23, 0.07);
  --shadow-lg: 0 4px 10px rgba(19, 28, 23, 0.06), 0 24px 48px rgba(19, 28, 23, 0.12);

  /* Card recipe (border-led, shadow second) */
  --card-border: 1px solid var(--border-subtle);
  --card-shadow: var(--shadow-sm);
  --card-radius: var(--radius-lg);
}