/* Bảng màu và cỡ chữ dùng chung, lấy từ mockup trong design/ */
:root {
  --pink-50: #FDE7F0;
  --pink-100: #FDE2EC;
  --pink-200: #F8BBD0;
  --pink-400: #F06292;
  --pink-600: #E0457B;
  --pink-700: #B23A5A;

  --violet-50: #F3E9FF;
  --violet-100: #EBDFFB;
  --violet-200: #D6BEF2;
  --violet-300: #B08BC4;
  --violet-600: #7A3E8C;
  --violet-800: #4A2C5A;

  --gold-50: #FFF6E3;
  --gold-100: #FFF1D6;
  --gold-400: #F2B84B;
  --gold-600: #C98A12;
  --gold-700: #B0770F;

  --green-400: #5BC48E;
  --green-600: #2E8B57;
  --cyan-400: #26C6DA;
  --purple-400: #7C4DFF;

  --ink: var(--violet-800);
  --ink-soft: #7A6A85;
  --ink-faint: #9B84A8;
  --paper: #FFFFFF;

  --font-display: 'Baloo 2', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --tap: 44px;

  --shadow-card: 0 10px 30px rgba(122, 62, 140, 0.12);
  --shadow-soft: 0 6px 18px rgba(122, 62, 140, 0.10);
  --shadow-btn: 0 4px 12px rgba(122, 62, 140, 0.12);

  --bg-home: linear-gradient(180deg, #FDE7F0 0%, #F3E9FF 60%, #FFF6E3 100%);
  --bg-gift: radial-gradient(circle at 50% 42%, #FFF6E3 0%, #FDE7F0 45%, #F3E9FF 100%);
  --bg-lesson: linear-gradient(180deg, #FDE7F0 0%, #F3E9FF 70%, #FFF6E3 100%);
  --bg-count: linear-gradient(180deg, #EFE6FF 0%, #F3E9FF 50%, #FDE7F0 100%);
  --bg-dressup: linear-gradient(180deg, #FFF6E3 0%, #FDE7F0 55%, #F3E9FF 100%);
  --bg-night: linear-gradient(180deg, #2E2350 0%, #4A3A7A 60%, #6B4C8F 100%);
  --bg-parent: #F7F2FA;
}