/* Thang không màu của design system Bơi Đạt v7. Mẫu từ sketch-to-site/templates/tokens.css.
   Màu KHÔNG nằm ở đây: màu theo theme ở themes.css, sinh từ themes.json bằng scripts/themes.mjs.
   Hai portal là hai website riêng, chỉ chung logo (CONCEPT.md). Theme = portal:
     :root                          Portal quản lý (theme quan-ly, mặc định): Literata + Commissioner, bo 3/6/10, không bóng, viền 1px
     [data-surface="app"]           màn trên điện thoại (HLV, Portal người dùng): chữ thân 16px, ô nhập không dưới 16px (mobile-app.md mục 4)
     :root[data-theme="nguoi-dung"] Portal người dùng: Bricolage Grotesque + Work Sans, bo 8/14/20, viền mực 2px, bóng cứng lệch
   Nạp ở mọi trang, trước themes.css. Tên biến là hợp đồng chung của kit (rules-and-conflicts.md D.2). Giá trị theo DESIGN.md. */
:root{
  /* Chữ Portal quản lý: web app dày, tỉ lệ ≈ 1.2, chữ thân 15px (11/10/2026, BA: "cỡ chữ tổng thể toàn trang Admin to lên 1 chút";
     trước 14px, mỗi bậc tăng khoảng 1px: 13 · 14 · 15 · 17 · 20 · 24 · 30 · 38). 4xl 38px ≈ 2,5 lần chữ thân */
  --text-xs:0.8125rem; --text-sm:0.875rem; --text-base:0.9375rem; --text-lg:1.0625rem; --text-xl:1.25rem;
  --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.375rem;
  --leading-tight:1.25; --leading-normal:1.55;
  --font-display:"Literata", Georgia, serif; --font-body:"Commissioner", system-ui, sans-serif;
  --font-mono:"Inconsolata", ui-monospace, monospace; --brand-font:var(--font-body);
  --weight-display:600; --weight-strong:600;

  /* Bóng: concept M khoá không bóng. Lớp phủ tách khỏi nền bằng viền 1px và nền mờ --scrim */
  --shadow-1:none; --shadow-2:none; --shadow-3:none; --shadow-4:none; --shadow:none;
  --border-width:1px; --border-ink:var(--line);

  /* Bo góc: ô lưới, nhãn 3px · nút, ô nhập, thẻ 6px · ngăn trượt, hộp thoại 10px */
  --radius-sm:3px; --radius:6px; --radius-lg:10px;

  /* Chuyển động: MOTION 3, chỉ phản hồi và chuyển trạng thái, ≤ 200ms */
  --dur-fast:100ms; --dur-base:160ms; --dur-slow:200ms;
  --ease-out:cubic-bezier(.2, 0, 0, 1); --ease-in:cubic-bezier(.4, 0, 1, 1); --ease-emphasis:cubic-bezier(.2, .9, .3, 1);

  /* Khung Portal quản lý desktop: thanh trên · hàng phân hệ · sidebar trái (DECISIONS.md, Cổng Bản đồ).
     11/10/2026: thanh trên 52 → 60px (logo 40px, các ô trên thanh 36px), sidebar 224 → 248px cho mục chữ 15px */
  --topbar-h:60px; --sidebar-w:248px; --drawer-w:440px;
  /* Vùng chạm và safe area: app.css nạp sau ở màn điện thoại và đè (iOS 44 · Android 48 · env()); đây là mặc định cho trang không nạp app.css */
  --tap:44px; --sat:0px; --sab:0px;

  /* Lớp: thang cố định (preflight.py P14) */
  --z-sticky:10; --z-dropdown:20; --z-overlay:30; --z-modal:40; --z-toast:50;

  --disabled-opacity:.5;
}
/* Màn trên điện thoại: chữ thân 16px (iOS 17 cho chữ thân · ô nhập ≥ 16px để Safari không tự phóng). 4xl 40px = 2,5 lần.
   .surface-app: cùng thang cho khung điện thoại đặt trong _system.html (trang đó không phải màn app) */
[data-surface="app"], .surface-app{
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem;
  --text-2xl:1.625rem; --text-3xl:2rem; --text-4xl:2.5rem;
  --leading-normal:1.5;
}
/* Portal người dùng: chữ Z5, hình khối Z5 (viền mực 2px, bóng cứng lệch màu mực), nhịp sheet 300ms */
:root[data-theme="nguoi-dung"]{
  --font-display:"Bricolage Grotesque", system-ui, sans-serif; --font-body:"Work Sans", system-ui, sans-serif;
  --font-mono:"Noto Sans Mono", ui-monospace, monospace; --brand-font:var(--font-body);
  --weight-display:700; --weight-strong:600;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem;
  --text-2xl:1.625rem; --text-3xl:2rem; --text-4xl:2.5rem;
  --leading-tight:1.15; --leading-normal:1.5;
  --shadow-1:3px 3px 0 var(--ink); --shadow-2:3px 3px 0 var(--ink); --shadow-3:4px 4px 0 var(--ink); --shadow-4:5px 5px 0 var(--ink);
  --shadow:var(--shadow-1);
  --border-width:2px; --border-ink:var(--ink);
  --radius-sm:8px; --radius:14px; --radius-lg:20px;
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:300ms;
}
@media (prefers-reduced-motion: reduce){
  :root, :root[data-theme="nguoi-dung"]{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}