/* Design tokens — chỉnh tại đây để đổi toàn bộ giao diện. */
:root {
  /* Màu */
  --c-brand: #d63543;          /* Đỏ Pigeon – màu hành động chính (tương phản ≥ 4.5:1 với chữ trắng) */
  --c-brand-hover: #bf2c39;
  --c-brand-press: #a82431;
  --c-brand-soft: #fdecee;     /* nền nhạt cho chip / thông báo */
  --c-brand-softer: #fff5f6;
  --c-brand-line: #f6c9ce;

  --c-bg: #f3f7f6;             /* nền trang */
  --c-surface: #ffffff;
  --c-surface-alt: #eaf2f0;    /* khối nhấn xanh bạc hà nhạt */
  --c-line: #d9e5e2;
  --c-line-strong: #bfd0cc;

  --c-text: #17363a;
  --c-text-2: #4d6668;
  --c-text-3: #6f8587;
  --c-on-brand: #ffffff;

  --c-success: #1f8a5b;
  --c-success-soft: #e3f4ec;
  --c-error: #c62828;
  --c-error-soft: #fdecec;
  --c-focus: #1d6fd6;

  /* Kiểu chữ */
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem; /* 17 */
  --fs-xl: 1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;   /* 24 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh: 1.45;

  /* Khoảng cách */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --gutter: 16px;

  /* Bo góc */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Đổ bóng */
  --sh-card: 0 1px 2px rgba(23, 54, 58, 0.05);
  --sh-bar: 0 -6px 20px rgba(23, 54, 58, 0.08);
  --sh-toast: 0 8px 24px rgba(23, 54, 58, 0.18);

  /* Kích thước thao tác */
  --tap: 44px;                 /* vùng chạm tối thiểu */
  --btn-h: 52px;
  --bar-h: 76px;               /* chiều cao thanh thao tác (chưa gồm safe-area) */
  --app-max: 480px;

  /* Chuyển động */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --app-max: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}
