/* Biến thiết kế (docs/superpowers/specs/2026-10-01-prototype-ui-design.md §2). */
:root {
  --primary: #f0509a;
  --primary-600: #d93a84;
  --primary-700: #b82a6c;
  --primary-soft: #ffe3ef;
  --primary-50: #fff4f9;
  --secondary: #5a54aa;
  --secondary-600: #4a4496;
  --secondary-soft: #eceafb;
  --accent: #fca80c;
  --accent-soft: #fff1d1;
  --success: #2fb37c;
  --success-soft: #dcf6ea;
  --warning: #f59e0b;
  --warning-soft: #fef3d7;
  --danger: #e5484d;
  --danger-soft: #fde6e7;
  --info: #3b82f6;
  --info-soft: #e1edff;

  --ink: #2b2340;
  --ink-2: #6b6480;
  --ink-3: #a39db3;
  --line: #efe8f1;
  --line-2: #e4dcea;
  --surface: #ffffff;
  --surface-2: #faf7fb;
  --brown: #7a3b2e;

  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow: 0 6px 20px rgba(90, 84, 170, 0.1);
  --shadow-sm: 0 2px 8px rgba(90, 84, 170, 0.08);
  --shadow-pink: 0 8px 18px rgba(240, 80, 154, 0.32);
  --shadow-indigo: 0 8px 18px rgba(90, 84, 170, 0.35);

  --f-head: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
  --f-name: 'Merienda', 'Baloo 2', serif;
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;

  --gap: 16px;
  --tabbar-h: 64px;
  --status-h: 0px;

  /* nền theo theme màn (đổi bởi [data-theme]) */
  --bg-top: #fff0f7;
  --bg-bot: #ffffff;
  --bg-blob: #ffd6ea;
}

[data-theme='pink'] { --bg-top: #ffe9f3; --bg-mid: #fff6fa; --bg-bot: #ffffff; --bg-blob: #ffd2e6; }
[data-theme='lavender'] { --bg-top: #e9e0fb; --bg-mid: #f5f0fd; --bg-bot: #ffffff; --bg-blob: #d9cdfa; }
[data-theme='cream'] { --bg-top: #fdf1d4; --bg-mid: #fef8e9; --bg-bot: #fffdf8; --bg-blob: #fbe3b3; }
[data-theme='peach'] { --bg-top: #fde3d8; --bg-mid: #fef1eb; --bg-bot: #ffffff; --bg-blob: #fbcdb9; }
[data-theme='mint'] { --bg-top: #dcf5ea; --bg-mid: #f0fbf6; --bg-bot: #ffffff; --bg-blob: #bfead7; }
[data-theme='sky'] { --bg-top: #e1eeff; --bg-mid: #f2f7ff; --bg-bot: #ffffff; --bg-blob: #c8defc; }
[data-theme='white'] { --bg-top: #faf7fb; --bg-mid: #ffffff; --bg-bot: #ffffff; --bg-blob: transparent; }
[data-theme='dark'] { --bg-top: #221c35; --bg-mid: #1b1629; --bg-bot: #15111f; --bg-blob: #3a2f5c; }