/*
 * Roomii Design System — token cho HomeTrack (chỉ mượn phong cách, KHÔNG dùng thương hiệu Roomii).
 * Nguồn: Claude Design "Roomii Design System" (tokens/*.css), chép ngày 2026-09-27.
 * Bỏ: wordmark font, overlay ảnh phòng, bề mặt dark (không làm dark mode).
 * Sửa màu ở đây thì sửa CẢ public/js/tailwind-theme.js (test kiểm tra khớp).
 * Spec: docs/superpowers/specs/2026-09-27-roomii-reskin-design.md
 */
:root {
  /* ---- giấy & cát ---- */
  --paper-50: #FFFEFB;
  --paper-100: #FAF9F5;
  --paper-200: #F4F2EC;
  --paper-300: #F0EEE6;
  --paper-400: #EDEAE1;
  --sand-100: #E8E6DE;
  --sand-200: #E5E0D5;
  --sand-300: #D8D3C6;

  /* ---- mực ---- */
  --ink-900: #1F1E1D;
  --ink-700: #4F4A40;
  --ink-500: #6B6557;
  --ink-400: #8A8475;
  --ink-300: #9A9384;
  --ink-200: #B4AE9F;
  --ink-100: #C8C2B4;
  --cream-100: #F5F1E8;

  /* ---- terracotta (hành động) ---- */
  --terra-100: #F8E8DF;
  --terra-200: #EFD2C4;
  --terra-300: #E0936F;
  --terra-500: #D97757;
  --terra-600: #C05F3C;
  --terra-700: #A6452D;

  /* ---- sage (tích cực / đã xong) ---- */
  --sage-300: #9DA87E;
  --sage-500: #7D8763;
  --sage-600: #5E6A48;

  /* ---- slate (thông tin) ---- */
  --slate-300: #93A9C0;
  --slate-500: #7A93AC;
  --slate-600: #4E657D;

  /* ---- amber (cần chú ý) ---- */
  --amber-500: #DDA15E;
  --amber-600: #C98A4B;
  --amber-700: #92652C;

  /* ================= ngữ nghĩa ================= */
  --surface-page: var(--sand-100);
  --surface-base: var(--paper-100);
  --surface-card: var(--paper-50);
  --surface-subtle: var(--paper-300);
  --surface-locked: var(--paper-200);
  --surface-placeholder: var(--paper-400);
  --surface-inverse: var(--ink-900);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-faint: var(--ink-200);
  --text-placeholder: var(--ink-300);
  --text-on-brand: var(--paper-100);
  --text-on-inverse: var(--cream-100);
  --text-on-inverse-muted: rgba(245,241,232,.5);

  --border-default: var(--sand-200);
  --border-strong: var(--sand-300);
  --border-hairline: #EFEDE4;
  --border-inverse: rgba(245,241,232,.12);

  --brand-primary: var(--terra-500);
  --brand-primary-hover: var(--terra-600);
  --brand-primary-press: var(--terra-700);
  --brand-primary-soft: var(--terra-100);
  --brand-primary-tint: rgba(217,119,87,.11);

  --accent-sage: var(--sage-500);
  --accent-sage-tint: rgba(125,135,99,.13);
  --accent-slate: var(--slate-500);
  --accent-slate-tint: rgba(122,147,172,.14);
  --accent-amber: var(--amber-500);
  --accent-amber-tint: rgba(221,161,94,.18);

  --focus-ring: var(--terra-500);
  --danger: var(--terra-700);
  --danger-tint: rgba(166,69,45,.08);
  --danger-border: #E8C4B8;

  /* trạng thái (dùng cho badge tiền ở Đợt 1) */
  --status-available-fg: var(--sage-600);
  --status-available-bg: rgba(125,135,99,.16);
  --status-available-dot: var(--sage-500);
  --status-lowstock-fg: var(--amber-700);
  --status-lowstock-bg: rgba(201,138,75,.16);
  --status-lowstock-dot: var(--amber-600);
  --status-pending-fg: var(--slate-600);
  --status-pending-bg: rgba(122,147,172,.14);
  --status-pending-dot: var(--slate-500);
  --status-cancelled-fg: var(--terra-700);
  --status-cancelled-bg: rgba(166,69,45,.12);
  --status-cancelled-dot: var(--terra-700);
  --status-neutral-fg: var(--ink-500);
  --status-neutral-bg: rgba(107,101,87,.13);
  --status-neutral-dot: var(--ink-400);

  --overlay-glass: rgba(250,249,245,.85);
  --overlay-scrim: rgba(31,30,29,.45);

  /* ---- chữ ---- */
  --font-heading: 'Newsreader', Georgia, serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --text-h1: 44px;
  --text-hero: 37px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-h4: 19px;
  --text-h5: 17px;
  --text-body-lg: 16px;
  --text-body: 14.5px;
  --text-body-sm: 13.5px;
  --text-caption: 12.5px;
  --text-micro: 11.5px;
  --text-label: 11px;
  --text-label-sm: 10.5px;
  --text-label-xs: 9.5px;

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

  --leading-tight: 1.06;
  --leading-heading: 1.15;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --leading-loose: 1.65;

  --tracking-heading: -.4px;
  --tracking-label: 1.8px;
  --tracking-label-wide: 2.5px;
  --tracking-eyebrow: 3px;

  /* ---- khoảng cách ---- */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-26: 26px;
  --space-30: 30px;
  --space-36: 36px;
  --space-46: 46px;
  --space-54: 54px;
  --gutter-mobile: 22px;
  --gutter-desktop: 48px;
  --control-h-sm: 34px;
  --control-h: 44px;
  --field-h: 52px;

  /* ---- bo góc ---- */
  --radius-xs: 7px;
  --radius-sm: 11px;
  --radius-md: 13px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 20px;
  --radius-sheet: 26px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  /* ---- bóng (ấm, loang, không xám) ---- */
  --shadow-hairline: 0 2px 8px -6px rgba(31,30,29,.2);
  --shadow-card: 0 10px 22px -18px rgba(31,30,29,.3);
  --shadow-card-lg: 0 14px 30px -20px rgba(31,30,29,.32);
  --shadow-panel: 0 20px 46px -34px rgba(31,30,29,.35);
  --shadow-modal: 0 30px 70px -40px rgba(31,30,29,.4);
  --shadow-brand: 0 8px 18px -9px rgba(217,119,87,.85);

  /* ---- chuyển động ---- */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --press-scale: .97;

  /* ---- texture nền (chỉ đặt trên nền trang, không lên thẻ) ---- */
  --texture-grid-size: 26px;
  --texture-grid-line: rgba(31,30,29,.022);
  --texture-grid: linear-gradient(var(--texture-grid-line) 1px, transparent 1px),
                  linear-gradient(90deg, var(--texture-grid-line) 1px, transparent 1px);
}