/* Xuân Thu · sanxuat — design tokens (UI v2).
   Nguồn: xuanthu1975.com (ink #2A2018 · orange #E76228 · line #E7DECB) dịch sang công cụ vận hành:
   nền trung tính, cam chỉ cho hành động chính / mục đang chọn / focus, bo góc 6–8px, viền 1px thay bóng.
   app.css chỉ được dùng token ở đây — không hex rời. Dark mode = đổi token, không lặp rule. */
@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: #FCFCFB; --bg-surface: #FFFFFF; --bg-sunken: #F5F4F1; --bg-hover: #F3F1EC; --bg-selected: #FBEFE7;
    --bg-rail: #FFF9F0;               /* sidebar: chút beige của thương hiệu, chỗ duy nhất */
    --bg-overlay: rgba(42, 32, 24, .38);
    /* ---- text ---- */
    --fg-primary: #2A2018; --fg-secondary: #5C5347; --fg-muted: #8C8276; --fg-inverse: #FFFFFF; --fg-disabled: #B5ADA3;
    /* ---- borders ---- */
    --border-subtle: #EFECE6; --border-default: #E3DED6; --border-strong: #C9C1B5; --border-focus: #E76228;
    /* ---- accent ---- */
    --accent: #E76228; --accent-hover: #C44E1C; --accent-active: #A8421A; --accent-subtle-bg: #FBEFE7; --accent-fg: #FFFFFF; --accent-text: #B84A1B;
    /* ---- status: nền nhạt + chữ đậm (không đổ màu đặc) ---- */
    --status-ok: #1F7A4D; --status-ok-bg: #E6F4EC;
    --status-warn: #9A6200; --status-warn-bg: #FBF0D6;
    --status-danger: #B7322A; --status-danger-bg: #FBE7E4;
    --status-info: #27407A; --status-info-bg: #E6ECF8;
    --status-neutral: #5C5347; --status-neutral-bg: #F0EDE7;
    /* ---- type ---- */
    --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-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px;
    --lh-body: 1.45; --lh-head: 1.25;
    --ls-caps: .02em; --ls-tight: -.01em;
    /* ---- space ---- */
    --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 ---- */
    --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);
    /* ---- motion ---- */
    --ease: cubic-bezier(.2, 0, 0, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 240ms;
    /* ---- focus ---- */
    --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
    /* ---- 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;
    --maxw-read: 720px;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: #151311; --bg-surface: #1C1917; --bg-sunken: #121010; --bg-hover: #26221E; --bg-selected: #3A2418; --bg-rail: #19161300;
    --bg-overlay: rgba(0, 0, 0, .55);
    --fg-primary: #F1ECE4; --fg-secondary: #B8AFA3; --fg-muted: #857C71; --fg-inverse: #1C1917; --fg-disabled: #5E574F;
    --border-subtle: #26221E; --border-default: #332E28; --border-strong: #4A433B;
    --accent: #F0703A; --accent-hover: #F6864F; --accent-active: #E76228; --accent-subtle-bg: #3A2418; --accent-fg: #1C1917; --accent-text: #F6A27A;
    --status-ok: #6FD39A; --status-ok-bg: #16301F;
    --status-warn: #F0C464; --status-warn-bg: #362B10;
    --status-danger: #F49A90; --status-danger-bg: #3D1B18;
    --status-info: #9DB4EE; --status-info-bg: #1B2540;
    --status-neutral: #B8AFA3; --status-neutral-bg: #26221E;
    --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: #151311; --bg-surface: #1C1917; --bg-sunken: #121010; --bg-hover: #26221E; --bg-selected: #3A2418; --bg-rail: #19161300;
    --bg-overlay: rgba(0, 0, 0, .55);
    --fg-primary: #F1ECE4; --fg-secondary: #B8AFA3; --fg-muted: #857C71; --fg-inverse: #1C1917; --fg-disabled: #5E574F;
    --border-subtle: #26221E; --border-default: #332E28; --border-strong: #4A433B;
    --accent: #F0703A; --accent-hover: #F6864F; --accent-active: #E76228; --accent-subtle-bg: #3A2418; --accent-fg: #1C1917; --accent-text: #F6A27A;
    --status-ok: #6FD39A; --status-ok-bg: #16301F;
    --status-warn: #F0C464; --status-warn-bg: #362B10;
    --status-danger: #F49A90; --status-danger-bg: #3D1B18;
    --status-info: #9DB4EE; --status-info-bg: #1B2540;
    --status-neutral: #B8AFA3; --status-neutral-bg: #26221E;
    --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)…) trỏ về token mới. */
  :root { --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); }
}