/* WeHa design tokens — nguồn: design/design.md (đồng bộ với trang Nhiệt kế) */
:root {
  /* Thương hiệu */
  --navy: #0F1F3A;
  --navy-raised: #1A2B4A;
  --navy-track: #24375A;
  --logo-navy: #012560;
  --gold: #B07D1A;          /* chỉ số >=24px đậm, đồ họa */
  --gold-strong: #7D5A0E;   /* chữ vàng cỡ nhỏ trên nền sáng */
  --gold-light: #E8B850;    /* vàng trên nền navy */
  --gold-fill: #FBEFD2;

  /* Bề mặt và chữ */
  --surface-page: #E6EAF2;
  --surface: #FFFFFF;
  --surface-soft: #F5F7FA;
  --text: #16203A;
  --text-2: #4A5568;
  --text-muted: #6B7587;    /* chỉ chữ >=18px hoặc trục biểu đồ */
  --border: #D5DCE7;
  --on-dark: #EEF1F6;
  --on-dark-2: #A9B4C6;

  /* Tăng / giảm / vùng điểm */
  --up: #1E7A45;
  --down: #C0352A;
  --up-bg: #D3EBDC;
  --down-bg: #F6D5D0;
  --neutral-bg: #F2E2BE;
  --up-strong: #1B5E36;
  --neutral-strong: #6B4F10;
  --up-on-dark: #8EDBAE;
  --down-on-dark: #F59A90;
  --up-bar: #2F8A57;
  --down-bar: #C23E33;

  /* Nền vùng trên biểu đồ (đậm hơn nền nhãn) */
  --zone-up-fill: rgba(30,122,69,.22);
  --zone-down-fill: rgba(192,53,42,.20);
  --zone-mid-fill: rgba(176,125,26,.24);

  /* Vai trò (đổi theo giao diện sáng/tối) */
  --ink: #0F1F3A;            /* chữ tiêu đề, đường biểu đồ chính, viền nhấn */
  --primary-bg: #0F1F3A;     /* nút chính, mục menu đang chọn */
  --primary-fg: #FFFFFF;
  --primary-hover: #1A2B4A;
  --hero-bg: #0F1F3A;        /* thẻ nổi bật */
  --footer-bg: #0F1F3A;
  --header-bg: rgba(255,255,255,.95);

  /* Chữ */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, serif;

  /* Khoảng cách (4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* Bo góc, bóng */
  --r-sm: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  --shadow-card: 0 1px 2px rgba(15,31,58,.04), 0 4px 16px rgba(15,31,58,.04);
  --shadow-card-hover: 0 2px 4px rgba(15,31,58,.06), 0 8px 24px rgba(15,31,58,.08);

  --container: 1200px;
}

/* ===== Giao diện tối ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0B1426;
  --surface: #121D33;
  --surface-soft: #1A2740;
  --text: #E6EAF2;
  --text-2: #A9B4C6;
  --text-muted: #8793A8;
  --border: #26344F;
  --ink: #F1F4F9;
  --primary-bg: #E8B850;
  --primary-fg: #0F1F3A;
  --primary-hover: #F0C76C;
  --hero-bg: #172744;
  --footer-bg: #070E1C;
  --header-bg: rgba(11,20,38,.92);
  --gold: #D9A53A;
  --gold-strong: #E8B850;
  --gold-fill: rgba(232,184,80,.12);
  --up: #4CC27F;
  --down: #F07A6E;
  --up-bg: rgba(76,194,127,.16);
  --down-bg: rgba(240,122,110,.16);
  --neutral-bg: rgba(232,184,80,.16);
  --up-strong: #7FD9A4;
  --neutral-strong: #F0C56A;
  --up-bar: #3FAE6E;
  --down-bar: #E0574B;
  --zone-up-fill: rgba(76,194,127,.24);
  --zone-down-fill: rgba(240,122,110,.22);
  --zone-mid-fill: rgba(232,184,80,.22);
  --shadow-card: 0 0 0 1px var(--border);
  --shadow-card-hover: 0 0 0 1px var(--text-muted);
}