/* BrandZero K-beauty — design tokens.
 * Sinh từ design system "BrandZero K-beauty" (tokens.json) ngày 18/10/2026. Không sửa tay:
 * đổi token ở design system rồi sinh lại. Luật dùng: DESIGN.md ở gốc repo. */
:root {
  /* Màu */
  --paper: #fff7fb;
  --paper-dot: #f6d9e8;
  --surface: #ffffff;
  --ink: #1e1b3a;
  --neutral-50: #faf9ff;
  --neutral-100: #f3f2fb;
  --neutral-200: #e6e4f2;
  --neutral-300: #d0cfe0;
  --neutral-400: #b0aec3;
  --neutral-500: #8b89a1;
  --neutral-600: #6b6882;
  --neutral-700: #524e6a;
  --neutral-800: #3d3956;
  --neutral-900: #2b2645;
  --neutral-950: var(--ink);
  --text-muted: var(--neutral-700);
  --pink-100: #ffe8f1;
  --pink-200: #ffd1e3;
  --pink-300: #ffb3d1;
  --pink-400: #fc90bc;
  --pink-500: #ff6fae;
  --pink-600: #db4b8f;
  --pink-700: #b83274;
  --pink-800: #902559;
  --pink-900: #6d1c43;
  --blush: #ffd6e8;
  --butter: #ffe14d;
  --butter-soft: #fff1b8;
  --mint: #a8eed6;
  --lilac: #cfc3ff;
  --peach: #ffc9a8;
  --positive: #13795a;
  --positive-fill: #3fcf9d;
  --neutral-fill: #e9e4f7;
  --negative: #c0233f;
  --negative-fill: #f0405f;
  --negative-surface: #ffe1e6;
  --warning: #8a5a00;
  --info: #3157d5;
  --info-surface: #e3eaff;
  --note-pen: #c2185b;
  --platform-tiktok: var(--ink);
  --platform-x: #b9a6ff;
  --platform-facebook: #4a7dff;
  --platform-instagram: var(--pink-500);
  --platform-youtube: #ff7a59;
  --cover-plum: #3b2a6b;
  --cover-berry: #8e2c5c;
  --cover-teal: #1f5e57;
  --cover-cocoa: #7a4a1e;
  --cover-violet: #4b3a8c;
  --cover-rose: #a23a4e;
  /* Họ chữ */
  --font-display: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-hand: "Patrick Hand", "Be Vietnam Pro", cursive;
  /* Cỡ chữ (máy tính) */
  --fs-display-hero: 58px;
  --fs-display-xl: 46px;
  --fs-display-lg: 32px;
  --fs-display-md: 26px;
  --fs-display-sm: 22px;
  --fs-stat: 30px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-note-lg: 24px;
  --fs-note: 19px;
  --fs-note-sm: 16px;
  /* Khoảng cách */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;
  /* Bo góc */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 24px;
  --radius-bubble: 28px;
  --radius-tail: 6px;
  --radius-pill: 999px;
  /* Bóng đổ cứng */
  --shadow-sticker-sm: 2px 2px 0 #1e1b3a;
  --shadow-sticker-md: 4px 4px 0 #1e1b3a;
  --shadow-sticker-lg: 6px 6px 0 #1e1b3a;
  --shadow-pop-pink: 3px 3px 0 #ff6fae;
  /* Viền */
  --stroke-ink: 2px solid;
  --stroke-dashed: 2px dashed;
  /* Độ nghiêng sticker */
  --tilt-sm: 1.5deg;
  --tilt-md: 2deg;
  --tilt-lg: 3deg;
  /* Vùng bấm tối thiểu */
  --hit-min: 44px;
}
/* Điện thoại: chữ nhỏ hơn 1–2 bậc, chữ nhỏ nhất vẫn 12px, vùng bấm vẫn 44px. */
@media (max-width: 720px) {
  :root {
    --fs-display-hero: 26px;
    --fs-display-xl: 34px;
    --fs-display-lg: 26px;
    --fs-display-md: 22px;
    --fs-display-sm: 19px;
    --fs-stat: 24px;
    --fs-body-lg: 16px;
    --fs-body: 14px;
    --fs-body-sm: 13px;
    --fs-label: 12px;
    --fs-caption: 12px;
    --fs-note-lg: 20px;
    --fs-note: 16px;
    --fs-note-sm: 15px;
    --space-14: 32px;
  }
}