/* Design tokens. Mọi màu/khoảng cách/cỡ chữ khai báo ở đây, không hard-code nơi khác.
   Hướng đã chốt 2026-10-26: "002 Liquid Light" — light-first, kính trên nền pastel mesh.
   ponytail: dùng font hệ thống thay Be Vietnam Pro (app PWA offline, không tải webfont). */

:root {
  /* Màu — light mặc định */
  --bg: #f7f8fc;
  --bg-elev: #ffffff;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-solid: #ffffff;
  --surface-hover: rgba(255, 255, 255, 0.86);
  --border: #7e8796;          /* ≥3:1 trên nền kính — viền là thành phần UI, cần 3:1 */
  --border-strong: #5f6a7a;
  --hairline: rgba(255, 255, 255, 0.9);   /* sheen sáng lớp trên của kính */
  --line: rgba(14, 16, 20, 0.09);         /* đường kẻ trang trí, không phải viền UI */
  --text: #0e1014;
  --text-subtle: #555b6b;
  --text-faint: #5f6575;
  --accent: #c8380f;
  --accent-hover: #a82d0b;
  --accent-fg: #ffffff;
  --accent-soft: rgba(200, 56, 15, 0.1);
  --success: #096535;
  --success-fg: #ffffff;
  --danger-fg: #ffffff;
  --success-soft: rgba(9, 101, 53, 0.12);
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.1);
  --warning: #8f6209;
  --warning-soft: #fdf2d9;

  /* Kính */
  --glass: rgba(255, 255, 255, 0.5);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --surface-panel: #e6eaf8;   /* nền card phẳng (sidebar lobby) — mockup mobile */
  --surface-item: #ffffff;     /* item trong card phẳng — trắng đặc trên #EEF1FA */
  --blur: 26px;
  --sat: 180%;

  /* Nền pastel mesh — glass chỉ "thật" khi nền có chi tiết tần số cao */
  --mesh-1: #c3ceff;
  --mesh-2: #ffdccb;
  --mesh-3: #cff3e6;
  --mesh-line: rgba(14, 16, 20, 0.045);

  /* Khoảng cách — thang 4px */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* Cỡ chữ */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-hero: clamp(30px, 3.7vw, 42px);

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

  /* Khác */
  --shadow: 0 1px 0 var(--hairline) inset, 0 1px 2px rgba(14, 16, 20, 0.04),
            0 18px 44px -20px rgba(23, 29, 48, 0.18);
  --shadow-sm: 0 1px 0 var(--hairline) inset, 0 1px 2px rgba(14, 16, 20, 0.04);
  --ring: 0 0 0 3px var(--accent-soft);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --maxw: 1080px;
  --t-fast: 120ms;
  --t-base: 200ms;
}

/* Dark: nền than, kính tối 2 lớp (scrim + sheen), accent cam sáng */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1014;
  --bg-elev: #161a20;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-solid: #161a20;
  --surface-hover: rgba(255, 255, 255, 0.08);
  --border: #5f6a7a;
  --border-strong: #6f7a8b;
  --hairline: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.1);
  --text: #eef1f6;
  --text-subtle: #a8b2c1;
  --text-faint: #97a1b0;
  --accent: #ff6a45;
  --accent-hover: #ff8763;
  --accent-fg: #0d1014;
  --accent-soft: rgba(255, 106, 69, 0.14);
  --success: #34d399;
  --success-fg: #0d1014;
  --danger-fg: #0d1014;
  --success-soft: rgba(52, 211, 153, 0.14);
  --danger: #ff8a80;
  --danger-soft: rgba(255, 138, 128, 0.14);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);

  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --surface-panel: #101419;   /* tối hơn --surface-solid (#161a20) để item trắng-nổi như bản light */
  --surface-item: #212932;

  --mesh-1: #2b3a6b;
  --mesh-2: #5a2a1e;
  --mesh-3: #14453a;
  --mesh-line: rgba(255, 255, 255, 0.04);

  --shadow: 0 1px 0 var(--hairline) inset, 0 18px 44px -20px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 1px 0 var(--hairline) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
}