/* Xuân Thu · sanxuat — design tokens (UI v2, siết lại 08/10/2026 đợt A1).
   Nguồn: xuanthu1975.com (ink #2A2018 · orange #E76228 · line #E7DECB) dịch sang công cụ vận hành.
   Ý nghĩa màu (chốt 08/10): CAM = hành động chính / mục đang chọn / focus. VÀNG NÂU (--status-warn) = cần làm, cần để ý.
   ĐỎ (--status-danger) = sai, quá hạn, nguy hiểm. XANH (--status-ok) = đã xong, đủ. Không dùng cam cho cảnh báo.
   Chữ: SÁU bậc 12 / 13 / 14 / 16 / 20 / 24 (xưởng `body.vt-xuong` chỉ đổi token, không đổi rule). Hai bậc trưng bày --fs-big / --fs-hero cho số to.
   app.css chỉ được dùng token ở đây, không hex rời. Chế độ tối = đổi token, không lặp rule.
   16/10 (thiết kế v2 "Calm base, floor tiers", bước 1): nền trung tính ấm, chữ đậm hơn, ĐỎ chỉ cho đặt may và lỗi thật; chờ bàn giao = vàng (--status-warn-line). */
@layer tokens {
  :root {
    color-scheme: light;
    /* ---- brand (giữ nguyên từ site) ---- */
    --brand-ink: #2A2018; --brand-orange: #E76228; --brand-orange-deep: #C44E1C; --brand-beige: #FFF7E9; --brand-line: #E7DECB;
    /* ---- surfaces ---- */
    --bg-app: #F6F5F2; --bg-surface: #FFFFFF; --bg-sunken: #EFEDE9; --bg-hover: #F2F0EC; --bg-selected: #EFEDE8;
    --bg-rail: #FAF9F7;               /* v2 16/10: sidebar trung tính (cam chỉ cho hành động / chỗ đang đứng) */
    --bg-overlay: rgba(42, 32, 24, .38);
    /* ---- text (mọi màu chữ ≥ 4,5:1 trên nền app) ---- */
    --fg-primary: #1E1914; --fg-secondary: #4F483F; --fg-muted: #625B52; --fg-inverse: #FFFFFF; --fg-disabled: #A8A198;
    /* ---- borders ---- */
    --border-subtle: #ECE9E4; --border-default: #DEDAD3; --border-strong: #B9B1A5; --border-focus: #C44E1C;
    /* ---- accent: --accent cho mục đang chọn / viền / chữ cam; --accent-strong là NỀN nút chính (chữ trắng ≥ 4,5:1) ---- */
    --accent: #D85A22; --accent-strong: #C44E1C; --accent-hover: #AE4518; --accent-active: #963B14; --accent-subtle-bg: #FBF0E9; --accent-fg: #FFFFFF; --accent-text: #B0461A;
    /* ---- status: nền nhạt + chữ đậm; --on-status là chữ đặt TRÊN nền đặc (nút bàn giao, dải đỏ, huy hiệu) ---- */
    --status-ok: #1A7346; --status-ok-bg: #E5F2EA;
    --status-warn: #7F5000; --status-warn-bg: #FBF0D6; --status-warn-line: #C98A00;   /* -line: viền / vạch vàng cho "cần để ý" (chờ bàn giao) */
    --status-danger: #B42318; --status-danger-bg: #FCEAE7;
    --status-info: #24467F; --status-info-bg: #E6ECF8;
    --status-neutral: #5C5347; --status-neutral-bg: #F0EDE7;
    --on-status: #FFFFFF;
    /* ---- v2 (16/10, "Calm base, floor tiers"): huy hiệu đếm, chip mực, ký hiệu trạng thái, khung thẻ ---- */
    --badge-bg: #C8291D; --badge-fg: #FFFFFF;
    --ink-chip: #2A2018; --ink-chip-fg: #FFFFFF;
    --g-ok: "✓"; --g-warn: "▲"; --g-bad: "■"; --g-info: "●";      /* trạng thái không bao giờ chỉ bằng màu: ✓ xong · ▲ cần để ý · ■ đặt may / lỗi thật · ● tin */
    --v2-card-r: 12px; --v2-ctl-r: 10px; --v2-edge: 4px;
    --v2-shadow: 0 1px 2px rgba(30, 25, 20, .05);
    --v2-shadow-lift: 0 1px 2px rgba(30, 25, 20, .06), 0 6px 20px rgba(30, 25, 20, .07);
    --hatch-bad: repeating-linear-gradient(135deg, var(--status-danger) 0 5px, transparent 5px 9px);
    --dash-warn: repeating-linear-gradient(180deg, var(--status-warn-line) 0 10px, transparent 10px 14px);
    /* bậc theo vai (mặc định = bàn giấy). Cỡ chữ nền của bậc tên --t-text, KHÔNG phải --t-base (--t-base là thời gian chuyển động 180ms bên dưới) */
    --t-text: 15px; --t-min: 13px; --t-title: 24px; --t-num: 30px;
    --t-btn-h: 40px; --t-btn-fs: 15px; --t-bw: 1px; --t-r: 12px; --t-rail: var(--v2-edge);
    --t-tab-h: 60px; --t-tab-ic: 22px; --t-tab-fs: 12px;
    /* ---- type: sáu bậc ---- */
    --font-ui: 'Be Vietnam Pro', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px;
    --fs-big: 32px; --fs-hero: 40px;          /* số to trên bảng điều khiển; không dùng cho chữ */
    --lh-body: 1.45; --lh-head: 1.25;
    --ls-caps: .02em; --ls-tight: -.01em;
    /* ---- space: 4 / 8 / 12 / 16 / 24 / 32 (giữ thêm 2 / 6 / 20 / 40 / 48 cho chỗ cũ) ---- */
    --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
    /* ---- radius: 4 / 6 / 8 / 12 / pill ---- */
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
    /* ---- elevation: mặc định viền; bóng chỉ cho overlay ---- */
    --e-0: none;
    --e-1: 0 1px 2px rgba(42, 32, 24, .06), 0 8px 24px rgba(42, 32, 24, .10);
    --e-2: 0 2px 6px rgba(42, 32, 24, .08), 0 24px 64px rgba(42, 32, 24, .18);
    /* ---- z-index: một thang cho cả app ---- */
    --z-sticky: 10; --z-bar: 30; --z-overlay: 60; --z-sheet: 70; --z-top: 80; --z-toast: 90;
    /* ---- motion ---- */
    --ease: cubic-bezier(.2, 0, 0, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 240ms;
    /* ---- focus: bằng outline, không box-shadow (outline không bị overflow:hidden cắt và không bị layer khác đè) ---- */
    --focus-ring: 2px solid var(--accent); --focus-offset: 2px;
    /* ---- layout ---- */
    --topbar-h: 52px; --sidebar-w: 240px; --sidebar-w-min: 56px; --drawer-w: 480px; --tabbar-h: 56px;
    --row-h: 38px; --control-h-sm: 28px; --control-h: 32px; --control-h-lg: 36px; --touch-min: 44px;
    --foot-h: 0px;                            /* app.js (setFoot) ghi chiều cao thanh hành động vào đây để #view chừa chỗ */
    --maxw-read: 720px;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: #121110; --bg-surface: #1B1A18; --bg-sunken: #0D0C0B; --bg-hover: #242220; --bg-selected: #2A2825; --bg-rail: #161514;
    --bg-overlay: rgba(0, 0, 0, .55);
    --fg-primary: #EEEBE5; --fg-secondary: #C2BCB2; --fg-muted: #A39D94; --fg-inverse: #1C1917; --fg-disabled: #625D57;
    --border-subtle: #262422; --border-default: #34312D; --border-strong: #57524B; --border-focus: #F0824F;
    --accent: #F0824F; --accent-strong: #EE7A44; --accent-hover: #F4945F; --accent-active: #E06A33; --accent-subtle-bg: #33231A; --accent-fg: #161412; --accent-text: #F5A47F;
    --status-ok: #74D29E; --status-ok-bg: #15291D;
    --status-warn: #EEC56A; --status-warn-bg: #2E2511; --status-warn-line: #EEC56A;
    --status-danger: #F39A90; --status-danger-bg: #36191A;
    --status-info: #A9C4FF; --status-info-bg: #16233F;
    --status-neutral: #B8AFA3; --status-neutral-bg: #26221E;
    --on-status: #1C1917;
    --badge-bg: #C8291D; --badge-fg: #FFFFFF; --ink-chip: #EEEBE5; --ink-chip-fg: #141312;
    --v2-shadow: 0 0 0 transparent;          /* không dùng none: "inset …, var(--v2-shadow)" phải còn hợp lệ */
    --v2-shadow-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --hatch-bad: repeating-linear-gradient(135deg, var(--status-danger) 0 5px, transparent 5px 9px);
    --dash-warn: repeating-linear-gradient(180deg, var(--status-warn-line) 0 10px, transparent 10px 14px);
    --e-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    --e-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .7);
  } }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #121110; --bg-surface: #1B1A18; --bg-sunken: #0D0C0B; --bg-hover: #242220; --bg-selected: #2A2825; --bg-rail: #161514;
    --bg-overlay: rgba(0, 0, 0, .55);
    --fg-primary: #EEEBE5; --fg-secondary: #C2BCB2; --fg-muted: #A39D94; --fg-inverse: #1C1917; --fg-disabled: #625D57;
    --border-subtle: #262422; --border-default: #34312D; --border-strong: #57524B; --border-focus: #F0824F;
    --accent: #F0824F; --accent-strong: #EE7A44; --accent-hover: #F4945F; --accent-active: #E06A33; --accent-subtle-bg: #33231A; --accent-fg: #161412; --accent-text: #F5A47F;
    --status-ok: #74D29E; --status-ok-bg: #15291D;
    --status-warn: #EEC56A; --status-warn-bg: #2E2511; --status-warn-line: #EEC56A;
    --status-danger: #F39A90; --status-danger-bg: #36191A;
    --status-info: #A9C4FF; --status-info-bg: #16233F;
    --status-neutral: #B8AFA3; --status-neutral-bg: #26221E;
    --on-status: #1C1917;
    --badge-bg: #C8291D; --badge-fg: #FFFFFF; --ink-chip: #EEEBE5; --ink-chip-fg: #141312;
    --v2-shadow: 0 0 0 transparent;          /* không dùng none: "inset …, var(--v2-shadow)" phải còn hợp lệ */
    --v2-shadow-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --hatch-bad: repeating-linear-gradient(135deg, var(--status-danger) 0 5px, transparent 5px 9px);
    --dash-warn: repeating-linear-gradient(180deg, var(--status-warn-line) 0 10px, transparent 10px 14px);
    --e-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    --e-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .7);
  }
  @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }
  /* Tương thích ngược: tên cũ trong app.css / app.js (inline style dùng var(--o), var(--warn), var(--fg)…) trỏ về token mới.
     --fs-11 và --fs-18 không còn là bậc riêng: 11 → 12 (không chữ nào dưới 12px), 18 → 20. */
  :root { --fs-11: var(--fs-12); --fs-18: var(--fs-20);
    --o: var(--accent); --o-dark: var(--accent-hover); --beige: var(--bg-app); --card: var(--bg-surface); --ink: var(--fg-primary); --mut: var(--fg-secondary); --line: var(--border-default);
    --ok: var(--status-ok); --okbg: var(--status-ok-bg); --warn: var(--status-warn); --warnbg: var(--status-warn-bg); --bad: var(--status-danger); --badbg: var(--status-danger-bg); --navy: var(--status-info); --navybg: var(--status-info-bg);
    --fg: var(--fg-primary); --fg-default: var(--fg-primary); --text-2: var(--fg-secondary); --text-muted: var(--fg-muted); --muted: var(--fg-muted); --soft: var(--bg-sunken);
    --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --accent-soft: var(--accent-subtle-bg); }
}