/* === DESIGN TOKENS — extracted from reference images === */
:root {
  /* Primary colors */
  --pink-primary: #FF2D78;
  --pink-dark: #E91E63;
  --pink-cta: #FF1E6C;
  --pink-light: #FFE0EC;

  /* Green (badges) */
  --green-badge-bg: #E0F7E9;
  --green-badge-text: #2E7D32;
  --green-badge-border: #A5D6A7;
  --green-popular: #00C853;

  /* Neutrals */
  --bg-page: #F0F0F0;
  --bg-card: #FFFFFF;
  --bg-card-option: #F5F5F5;
  --bg-dark-overlay: rgba(0, 0, 0, 0.55);
  --text-dark: #1A1A1A;
  --text-medium: #555555;
  --text-light: #888888;
  --text-white: #FFFFFF;
  --border-light: #E0E0E0;

  /* Sidebar */
  --sidebar-bg: #FFFFFF;
  --sidebar-overlay: rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Sizing */
  --header-height: 64px;
  --max-content-width: 520px;
  --sidebar-width: 280px;

  /* Shadows */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}