/* ==========================================================================
   Design tokens – Mua Nhà Tây Hà Nội
   Nguồn: PRD mục 4.3. Mọi màu, cỡ chữ, khoảng cách trong dự án lấy từ đây.
   ========================================================================== */
:root {
  /* Màu nền & bề mặt */
  --color-bg: #0B1412;
  --color-bg-alt: #0F1A17;
  --color-surface: #13201C;
  --color-surface-active: #1B2E28;
  --color-border: #24352F;
  --color-border-strong: #3A5249;

  /* Chữ */
  --color-text: #EAF2EE;
  --color-text-soft: #C9D6D1;
  --color-text-muted: #A9BAB3;   /* ≥ 4.5:1 trên --color-bg */

  /* Nhấn & trạng thái */
  --color-accent: #2BD48A;
  --color-accent-hover: #7BE8B5;
  --color-on-accent: #06231A;
  --color-accent-glow: rgba(43, 212, 138, .35);
  --color-warn: #F2A33A;
  --color-warn-bg: #2A1E0E;
  --color-warn-text: #F6D7A8;

  /* Màu 6 trục – CHỈ dùng cho badge số */
  --axis-1: #3B7A20; /* An toàn     */
  --axis-2: #1A5E9C; /* Vị trí      */
  --axis-3: #5E3590; /* Quy hoạch   */
  --axis-4: #B35F12; /* Thanh khoản */
  --axis-5: #0F7272; /* Kiến trúc   */
  --axis-6: #B02E25; /* Định giá    */

  /* Typography */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2rem;      /* 32 */
  --fs-display: clamp(1.625rem, 1.1rem + 1.6vw, 2.25rem); /* 26 → 36 */
  --fs-counter: clamp(1.625rem, 1rem + 2vw, 2.75rem);     /* 26 → 44 */
  --lh-tight: 1.15;
  --lh-base: 1.5;

  /* Khoảng cách – thang 4px */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-12: 48px; --space-14: 56px; --space-18: 72px;

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

  /* Kích thước */
  --size-touch: 44px;
  --container: 1360px;
  --header-h: 68px;

  /* Chuyển động */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  --z-header: 50;
  --z-dock: 40;
}

@media (max-width: 1023.98px) {
  :root { --header-h: 58px; }
}