:root {
  /* Colors (RGB triplets so Tailwind <alpha-value> works) */
  --color-background: 255 247 240;
  --color-surface: 255 255 255;
  --color-surface-muted: 250 242 235;
  --color-text: 42 33 53;
  --color-muted: 142 128 153;
  --color-border: 235 224 215;

  --color-primary: 226 120 150;
  --color-primary-50: 255 236 243;
  --color-primary-600: 200 82 118;
  --color-primary-foreground: 255 255 255;

  --color-accent: 244 192 78;
  --color-accent-foreground: 70 48 10;

  --color-success: 97 186 129;
  --color-warning: 240 168 104;
  --color-danger: 226 107 107;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(42, 33, 53, 0.04), 0 10px 28px rgba(42, 33, 53, 0.07);
  --shadow-pop: 0 8px 32px rgba(42, 33, 53, 0.18);
  --shadow-focus: 0 0 0 3px rgba(226, 120, 150, 0.3);

  /* Transitions */
  --transition-base: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}