:root {
  /* Surfaces */
  --bg: #000000;
  --card: #1c1c1e;
  --card-raised: #232325;
  --pill-inactive: #2c2c2e;
  --track: #3a3a3c;

  /* Text */
  --text-primary: #ffffff;
  --text-muted: #8e8e93;
  --text-on-white: #000000;

  /* Category accents (match the four categories in the reference design) */
  --cat-food: #ff6b5b;
  --cat-food-bg: #3a1f1c;
  --cat-bills: #a78bfa;
  --cat-bills-bg: #24213a;
  --cat-transport: #2dd4bf;
  --cat-transport-bg: #16302f;
  --cat-entertainment: #ff9f0a;
  --cat-entertainment-bg: #3a2a14;
  --cat-shopping: #ff375f;
  --cat-shopping-bg: #3a1a26;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion — iOS-style ease curve, not linear defaults */
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* Safe areas — fall back to 0 on non-notched devices/browsers */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --tab-bar-height: 58px;
}