/* Lidub — design tokens dùng chung (lidub-ui, 2026-10-31). MỘT nguồn cho mọi trang: trang chủ, /pricing/, /account/, /extension/, /admin/*, /privacy/, /credits/.
   Cũng xuất sang extension/src/lib/ui-tokens.css (popup + panel dùng cùng màu/chữ; LIDUB Alive giữ riêng). Tài liệu: site/DESIGN.md và /lab/design/.
   Quy tắc: không màu cứng ngoài tệp này; trạng thái luôn kèm CHỮ (và ký hiệu), không chỉ màu; tương phản chữ ≥ 4,5:1 (AA). */

:root {
  /* Nền & chữ */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #eef0f6;
  --text: #0f172a;
  --muted: #4a5568;
  --line: #d9dee8;
  --line-strong: #b9c1d0;

  /* Thương hiệu: chàm-tím, điểm nhấn hổ phách (chỉ trang trí) */
  --brand: #4a37d8;
  --brand-strong: #3a28b8;
  --brand-ink: #ffffff;
  --brand-soft: #ebe8fd;
  --brand-soft-ink: #3a28b8;
  --accent: #f0a020;

  /* Trạng thái */
  --ok: #0d7044;
  --ok-soft: #e3f5ec;
  --warn: #8a5300;
  --warn-soft: #fff3d6;
  --warn-line: #e9c672;
  --danger: #b4232a;
  --danger-soft: #fde8e8;
  --info: #1d5fa8;
  --info-soft: #e4effb;

  /* Khung trình chiếu mô phỏng (luôn tối) */
  --stage: #0d1020;
  --stage-2: #1a1f38;
  --stage-text: #f1f3fa;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: clamp(1.6rem, 3.6vw, 2.1rem);
  --fs-hero: clamp(2rem, 6vw, 3.4rem);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 16px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 2px 6px rgb(15 23 42 / 0.08), 0 18px 48px rgb(40 30 120 / 0.14);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand);
  /* Khoảng cách (bội của 4 px), tay chạm, chuyển động */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --tap: 44px;
  --dur: 150ms;
  --max: 1120px;
  --gutter: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d16;
    --surface: #121726;
    --surface-2: #1a2034;
    --text: #e8ebf4;
    --muted: #a6afc4;
    --line: #283049;
    --line-strong: #3b4566;

    --brand: #a395ff;
    --brand-strong: #bdb3ff;
    --brand-ink: #140c3d;
    --brand-soft: #241e4d;
    --brand-soft-ink: #cdc5ff;
    --accent: #f6b444;

    --ok: #56d993;
    --ok-soft: #0f2a1f;
    --warn: #f3c46a;
    --warn-soft: #2b220f;
    --warn-line: #6b5420;
    --danger: #ff8a8f;
    --danger-soft: #3a1518;
    --info: #8ab9f0;
    --info-soft: #11233a;

    --stage: #05070e;
    --stage-2: #141a30;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}