:root {
  --primary: #EC4899;
  --primary-dark: #DB2777;
  --primary-light: #FCE7F3;
  --primary-rgb: 236, 72, 153;

  --secondary: #0A0A0A;
  --secondary-dark: #000000;
  --secondary-light: #1F1F1F;
  --secondary-rgb: 10, 10, 10;

  --accent: #10B981;
  --accent-dark: #059669;
  --accent-light: #D1FAE5;

  --purple: #EC4899;
  --purple-light: #FCE7F3;

  --orange: #D97706;
  --orange-light: #FEF3C7;

  --red: #DC2626;
  --red-light: #FEE2E2;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --border: #E5E5E5;

  --text: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-primary: 0 4px 18px rgba(236,72,153,0.35);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}