/*
 * etg.vn design tokens
 * Nguồn màu: logo ETG (#E94543) và bộ nhận diện HVN Group (đỏ #E84443, than #231F20, xám #808080).
 * Ba tầng: primitive (thang màu thô) -> semantic (vai trò trong UI) -> component (dùng trực tiếp).
 * Chế độ tối: thêm data-theme="dark" lên <html>, hoặc để hệ điều hành quyết định.
 */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Primitive: đỏ thương hiệu (lấy từ logo) ---------- */
  --red-50: #fdf1f0;
  --red-100: #fbdedd;
  --red-200: #f6bbb9;
  --red-300: #f08f8c;
  --red-400: #ec6764;
  --red-500: #e94543; /* logo ETG */
  --red-600: #d0302e;
  --red-700: #ad2422;
  --red-800: #851c1b;
  --red-900: #561211;

  /* ---------- Primitive: than ấm (lấy từ chữ logo HVN #231F20) ---------- */
  --ink-0: #ffffff;
  --ink-25: #fbfafa;
  --ink-50: #f6f4f4;
  --ink-100: #eeebeb;
  --ink-200: #e2dede;
  --ink-300: #c9c4c4;
  --ink-400: #a39d9e;
  --ink-500: #807a7b; /* gần #808080 của HVN */
  --ink-600: #635d5e;
  --ink-700: #4a4546;
  --ink-800: #343031;
  --ink-900: #231f20; /* HVN */
  --ink-950: #171415;

  /* ---------- Primitive: màu phụ trạng thái ---------- */
  --orange-500: #f5760f; /* Hot lead, lấy từ hvn.vn */
  --orange-100: #feead9;
  --amber-500: #d99a00; /* bị trả lại một phần */
  --amber-100: #fdf3d6;
  --green-600: #2b7a4b;
  --green-100: #e0f1e6;
  --blue-600: #2f63c8;
  --blue-100: #e3ebfa;
  --wine-700: #8f1d2c; /* gửi lỗi: tách khỏi đỏ thương hiệu vì đỏ = "đã xem" */
  --wine-100: #f7e1e4;

  /* ---------- Typography ---------- */
  --font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Be Vietnam Pro", system-ui, sans-serif; /* dùng kèm font-variant-numeric: tabular-nums */

  --text-xs: 0.75rem;   /* 12 - nhãn phụ, thời gian */
  --text-sm: 0.8125rem; /* 13 - bảng, popover */
  --text-md: 0.9375rem; /* 15 - nội dung chính */
  --text-lg: 1.125rem;  /* 18 - tiêu đề khối */
  --text-xl: 1.5rem;    /* 24 - tiêu đề trang */
  --text-2xl: 2rem;     /* 32 - số liệu lớn */
  --text-3xl: 2.75rem;  /* 44 - màn đăng nhập */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-tight: -0.015em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Không gian (lưới 4px) ---------- */
  --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-12: 48px;

  /* ---------- Bo góc theo cấp bậc (không dùng một giá trị cho mọi thứ) ---------- */
  --radius-xs: 3px;  /* chip, badge nhỏ */
  --radius-sm: 6px;  /* input, button */
  --radius-md: 10px; /* panel, card */
  --radius-lg: 14px; /* popover, dialog, popup extension */
  --radius-full: 999px;

  /* ---------- Chuyển động ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---------- Semantic: Light ---------- */
  --color-bg: var(--ink-50);
  --color-surface: var(--ink-0);
  --color-surface-sunken: var(--ink-25);
  --color-surface-raised: var(--ink-0);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-subtle: var(--ink-500);
  --color-text-inverse: var(--ink-0);

  --color-brand: var(--red-500);
  --color-brand-hover: var(--red-600);
  --color-brand-press: var(--red-700);
  --color-brand-soft: var(--red-50);
  --color-brand-soft-strong: var(--red-100);
  --color-on-brand: #ffffff;
  --color-focus: var(--red-400);

  /* Sidebar / chrome tối theo nhận diện HVN */
  --color-chrome: var(--ink-900);
  --color-chrome-hover: var(--ink-800);
  --color-chrome-text: var(--ink-300);
  --color-chrome-text-active: var(--ink-0);

  /* Trạng thái email: logo xám = chưa xem, logo đỏ = đã xem */
  --status-unopened: var(--ink-400);
  --status-unopened-soft: var(--ink-100);
  --status-opened: var(--red-500);
  --status-opened-soft: var(--red-50);
  --status-hot: var(--orange-500);
  --status-hot-soft: var(--orange-100);
  --status-partial-bounce: var(--amber-500);
  --status-partial-bounce-soft: var(--amber-100);
  --status-bounced: var(--wine-700);
  --status-bounced-soft: var(--wine-100);
  --status-scheduled: var(--blue-600);
  --status-scheduled-soft: var(--blue-100);
  --status-done: var(--green-600);
  --status-done-soft: var(--green-100);

  /* Biểu đồ */
  --chart-1: var(--red-500); /* cặp chart-1/chart-2 đã qua validator CVD */
  --chart-2: var(--blue-600);
  --chart-3: var(--orange-500);
  --chart-4: var(--ink-500);
  --chart-grid: var(--ink-100);

  /* Đổ bóng: chỉ cho lớp nổi (popover, dialog), không cho card thường */
  --shadow-pop: 0 1px 2px rgba(35, 31, 32, 0.06), 0 8px 24px rgba(35, 31, 32, 0.12);
  --shadow-dialog: 0 2px 4px rgba(35, 31, 32, 0.08), 0 20px 48px rgba(35, 31, 32, 0.22);

  /* Blur Paywall */
  --paywall-blur: 5px;

  --etg-mark-uri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 1.5 38.3 38.1' fill='none'%3E%3Cpath d='M133.839 1.79018H104.497C103.948 1.78054 103.403 1.88113 102.894 2.08596C102.384 2.29079 101.922 2.59566 101.533 2.98238C101.145 3.36911 100.839 3.82976 100.633 4.33687C100.428 4.84398 100.327 5.38714 100.336 5.93397V35.1398C100.332 35.6851 100.437 36.2256 100.645 36.7301C100.853 37.2345 101.159 37.6928 101.547 38.0784C101.934 38.4639 102.394 38.769 102.9 38.9759C103.407 39.1828 103.95 39.2874 104.497 39.2836H133.839C134.941 39.2799 135.997 38.8421 136.777 38.0658C137.557 37.2895 137.996 36.2377 138 35.1398V5.93397C138.004 5.38874 137.899 4.8482 137.691 4.34374C137.483 3.83929 137.177 3.38097 136.79 2.99543C136.402 2.60989 135.942 2.3048 135.436 2.0979C134.929 1.89099 134.386 1.7864 133.839 1.79018ZM108.801 34.4563C108.694 34.5667 108.565 34.654 108.422 34.7127C108.28 34.7715 108.126 34.8006 107.972 34.7981C107.662 34.7923 107.366 34.6702 107.143 34.4563C107.046 34.3563 106.971 34.2379 106.922 34.1081C106.873 33.9784 106.851 33.8401 106.857 33.7016C106.843 33.5495 106.861 33.3961 106.91 33.2514C106.96 33.1068 107.039 32.9739 107.143 32.8615C107.377 32.6733 107.672 32.5771 107.972 32.5909C108.273 32.5684 108.572 32.6657 108.801 32.8615C108.903 32.9751 108.979 33.1085 109.026 33.2531C109.073 33.3977 109.089 33.5505 109.073 33.7016C109.082 33.8392 109.062 33.9771 109.015 34.1069C108.969 34.2367 108.896 34.3556 108.801 34.4563ZM115.536 34.6699H113.177L108.673 23.748H111.246L114.392 31.6938L117.538 23.748H120.112L115.536 34.6699ZM131.48 34.6699H129.12V28.1054C129.153 27.758 129.116 27.4076 129.01 27.0749C128.904 26.7423 128.733 26.4341 128.505 26.1687C128.028 25.7412 127.402 25.5164 126.761 25.5422C126.255 25.5423 125.759 25.6855 125.331 25.9551C124.884 26.2763 124.529 26.7083 124.301 27.2083C124.075 27.7053 123.954 28.2432 123.944 28.7889V34.6699H121.656V23.748H123.887V25.2716C124.251 24.6843 124.763 24.2027 125.373 23.8752C125.983 23.5478 126.669 23.386 127.361 23.4062C127.923 23.3742 128.485 23.4618 129.011 23.6631C129.536 23.8645 130.012 24.175 130.407 24.5739C131.179 25.455 131.588 26.5946 131.551 27.7636L131.48 34.6699Z' fill='black'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---------- Semantic: Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--ink-950);
    --color-surface: #1f1b1c;
    --color-surface-sunken: #1a1718;
    --color-surface-raised: #2a2526;
    --color-border: #3a3435;
    --color-border-strong: #4d4647;
    --color-text: #f3efef;
    --color-text-muted: #bdb6b7;
    --color-text-subtle: #948d8e;
    --color-brand: var(--red-400);
    --color-brand-hover: var(--red-300);
    --color-brand-press: var(--red-500);
    --color-brand-soft: rgba(233, 69, 67, 0.14);
    --color-brand-soft-strong: rgba(233, 69, 67, 0.24);
    --color-chrome: #120f10;
    --color-chrome-hover: #241f20;
    --status-unopened: #7a7374;
    --status-unopened-soft: #2c2728;
    --status-opened: var(--red-400);
    --status-opened-soft: rgba(233, 69, 67, 0.16);
    --status-hot-soft: rgba(245, 118, 15, 0.18);
    --status-partial-bounce: #f0b72f;
    --status-partial-bounce-soft: rgba(217, 154, 0, 0.18);
    --status-bounced: #e0707f;
    --status-bounced-soft: rgba(143, 29, 44, 0.32);
    --status-scheduled: #7ea3ec;
    --status-scheduled-soft: rgba(47, 99, 200, 0.2);
    --status-done: #6cc28f;
    --status-done-soft: rgba(43, 122, 75, 0.22);
    --chart-2: #6d93e0;
    --chart-4: #948d8e;
    --chart-grid: #2e292a;
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-dialog: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--ink-950);
  --color-surface: #1f1b1c;
  --color-surface-sunken: #1a1718;
  --color-surface-raised: #2a2526;
  --color-border: #3a3435;
  --color-border-strong: #4d4647;
  --color-text: #f3efef;
  --color-text-muted: #bdb6b7;
  --color-text-subtle: #948d8e;
  --color-brand: var(--red-400);
  --color-brand-hover: var(--red-300);
  --color-brand-press: var(--red-500);
  --color-brand-soft: rgba(233, 69, 67, 0.14);
  --color-brand-soft-strong: rgba(233, 69, 67, 0.24);
  --color-chrome: #120f10;
  --color-chrome-hover: #241f20;
  --status-unopened: #7a7374;
  --status-unopened-soft: #2c2728;
  --status-opened: var(--red-400);
  --status-opened-soft: rgba(233, 69, 67, 0.16);
  --status-hot-soft: rgba(245, 118, 15, 0.18);
  --status-partial-bounce: #f0b72f;
  --status-partial-bounce-soft: rgba(217, 154, 0, 0.18);
  --status-bounced: #e0707f;
  --status-bounced-soft: rgba(143, 29, 44, 0.32);
  --status-scheduled: #7ea3ec;
  --status-scheduled-soft: rgba(47, 99, 200, 0.2);
  --status-done: #6cc28f;
  --status-done-soft: rgba(43, 122, 75, 0.22);
  --chart-2: #6d93e0;
  --chart-4: #948d8e;
  --chart-grid: #2e292a;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-dialog: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------- Base dùng chung cho mọi prototype ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* Dấu ETG trạng thái: một nguồn SVG, đổi màu qua mask */
.etg-mark {
  display: inline-block;
  width: var(--mark-size, 16px);
  height: var(--mark-size, 16px);
  background: var(--mark-color, var(--status-opened));
  -webkit-mask: var(--etg-mark-uri) center / contain no-repeat;
  mask: var(--etg-mark-uri) center / contain no-repeat;
  flex: none;
}
.etg-mark[data-state="unopened"], .etg-mark[data-state="scheduled"] { --mark-color: var(--status-unopened); }
.etg-mark[data-state="opened"], .etg-mark[data-state="hot"], .etg-mark[data-state="partial"] { --mark-color: var(--status-opened); }
.etg-mark[data-state="bounced"] { --mark-color: var(--status-bounced); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}