/* ============================================================
   tokens.css — DESIGN TOKENS · nguồn chân lý DUY NHẤT.
   ------------------------------------------------------------
   Phase 2 của redesign AOC. Nạp ĐẦU TIÊN (trước bootstrap-theme.css
   + aoc-wow.css). File này CHỈ khai báo custom property — KHÔNG có
   selector styling, KHÔNG !important.

   Giá trị light/dark khớp render hiện tại (aoc-wow.css) → thêm file
   này KHÔNG đổi giao diện. Các thang MỚI (space rem, type clamp,
   z-index, motion, kích thước workspace 3-pane) để Phase 3–5 dùng.

   Quy ước tên:
     --color-*   ngữ nghĩa (khuyến dùng ở code mới)
     --bg/--ink/--line/--green-*  alias tương thích ngược (code cũ)
     --space-N   thang 4px (rem)      --text-*  thang chữ (clamp)
     --radius-*  bo góc               --shadow-* đổ bóng
     --z-*       tầng xếp chồng       --dur-* / --ease-*  chuyển động
   ============================================================ */

:root {
  color-scheme: light;

  /* ─────────────────────────────────────────────────────────
     1 · MÀU NỀN TẢNG (giá trị thô — alias cũ, giữ nguyên tên)
     ───────────────────────────────────────────────────────── */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7f4;
  --surface-3: #f0f2ee;
  --ink: #2b2d29;
  --ink-2: #61635d;
  --ink-3: #a7a9a1;
  --ink-muted: #6c6e67;
  --line: #e8e9e3;
  --line-2: #dbdcd5;
  --green: #315d40;
  --green-hover: #276a49;
  --green-deep: #1d5137;
  --green-bright: #3f9d70;
  --green-soft: #eef4f0;
  --green-tint: #f4f8f5;
  --green-ink: #1c4d36;
  --green-ring: rgba(47, 125, 87, .28);
  --gold: #c9a84c;
  --gold-soft: #f7f0dd;
  --line-soft: #eef1ee;   /* viền/nền cực nhạt — dùng ở gate/tabs/progress */

  /* Gradient thương hiệu — PHẲNG (retail look sonxit.vn). Component cũ
     vẫn đọc các biến này; giữ để không phải sửa rải rác. */
  --grad-brand: linear-gradient(0deg, var(--green), var(--green));
  --grad-brand-soft: var(--surface);
  --grad-brand-radial: none;
  --grad-gold: linear-gradient(0deg, var(--gold), var(--gold));
  --grad-mesh: none;
  --danger: #c0392b;
  --danger-soft: #fcecea;
  --warn: #b4771b;
  --warn-soft: #fbf1e0;
  --info: #2f6f9e;
  --info-soft: #eaf2f8;
  --ok: var(--green);
  --ok-soft: var(--green-soft);

  /* ─────────────────────────────────────────────────────────
     2 · MÀU NGỮ NGHĨA  (dùng ở code MỚI — trỏ vào lớp thô trên)
     ───────────────────────────────────────────────────────── */
  --color-bg: var(--bg);                     /* nền trang ngoài cùng */
  --color-surface: var(--surface);           /* thẻ / panel */
  --color-surface-2: var(--surface-2);       /* nền chìm / hover nhẹ */
  --color-surface-3: var(--surface-3);       /* nền chìm sâu hơn */
  --color-surface-elevated: var(--surface);  /* popover / sheet / modal */
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-tertiary: var(--ink-3);
  --color-text-muted: var(--ink-muted);
  --color-text-on-primary: #ffffff;
  --color-border: var(--line);
  --color-border-strong: var(--line-2);
  --color-border-subtle: color-mix(in srgb, var(--line) 55%, transparent);
  --color-primary: var(--green);
  --color-primary-hover: var(--green-hover);
  --color-primary-active: var(--green-deep);
  --color-primary-soft: var(--green-soft);
  --color-primary-tint: var(--green-tint);
  --color-primary-ink: var(--green-ink);
  --color-primary-ring: var(--green-ring);
  --color-accent: var(--gold);
  --color-accent-soft: var(--gold-soft);
  --color-focus: var(--green);

  /* ─────────────────────────────────────────────────────────
     3 · KHOẢNG CÁCH — thang 4px, đơn vị rem
     (--sN px giữ lại cho code cũ của aoc-wow.css)
     ───────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-12: 6rem;     /* 96 */
  --space-16: 8rem;     /* 128 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 36px;
  --s7: 52px;

  /* khoảng đệm co giãn theo viewport — dùng cho gutter layout */
  --gutter: clamp(0.75rem, 2vw, 1.5rem);
  --gutter-lg: clamp(1rem, 3vw, 2.5rem);

  /* ─────────────────────────────────────────────────────────
     4 · CHỮ
     ───────────────────────────────────────────────────────── */
  --font-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  --bs-body-font-family: var(--font-ui);   /* alias Bootstrap cũ */
  --text-2xs: 0.6875rem;   /* 11 — nhãn phụ, mã màu nhỏ */
  --text-xs:  0.75rem;     /* 12 */
  --text-sm:  0.8125rem;   /* 13 */
  --text-base: 0.9375rem;  /* 15 — thân bài (đồng bộ body hiện tại) */
  --text-md:  1rem;        /* 16 */
  --text-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl:  clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --text-4xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ─────────────────────────────────────────────────────────
     5 · BO GÓC  (khớp aoc-wow.css)
     ───────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────
     6 · ĐỔ BÓNG  (khớp aoc-wow.css)
     ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(24, 26, 22, .07);
  --shadow-sm: 0 1px 3px rgba(24, 26, 22, .06), 0 4px 12px -8px rgba(24, 26, 22, .10);
  --shadow-card: 0 1px 3px rgba(24, 26, 22, .06), 0 6px 20px -10px rgba(24, 26, 22, .12);
  --shadow-card-hover: 0 2px 6px rgba(24, 26, 22, .08), 0 16px 34px -12px rgba(24, 26, 22, .16);
  --shadow-pop: 0 26px 60px -22px rgba(24, 26, 22, .3), 0 8px 20px -12px rgba(24, 26, 22, .16);
  --shadow-glow: var(--shadow-xs);
  --shadow-glow-gold: var(--shadow-xs);

  /* ─────────────────────────────────────────────────────────
     7 · CHUYỂN ĐỘNG — nhẹ, 120–280ms, ease-out
     ───────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);              /* alias cũ (bootstrap-theme) */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);  /* alias cũ */
  --aoc-ease: cubic-bezier(.22, .61, .36, 1);      /* alias cũ (aoc-wow) */

  /* ─────────────────────────────────────────────────────────
     8 · TẦNG XẾP CHỒNG — đồng bộ thang z-index Bootstrap 5.3
     ───────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-header: 1030;
  --z-overlay: 1040;
  --z-drawer: 1045;
  --z-modal: 1055;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1090;
  --z-max: 2147483000;

  /* ─────────────────────────────────────────────────────────
     9 · KÍCH THƯỚC LAYOUT / WORKSPACE  (Phase 3–4 tiêu thụ)
     ───────────────────────────────────────────────────────── */
  --header-h: 56px;
  --stepper-h: 52px;
  --content-max: 1680px;
  --rail-left-w: clamp(360px, 27vw, 440px);
  --rail-left-w-collapsed: 60px;
  --rail-right-w: clamp(300px, 23vw, 344px);
  --rail-right-w-collapsed: 0px;
  --canvas-min-h: 320px;
  --canvas-pad: clamp(0.5rem, 2vw, 1.25rem);
  --tap-min: 44px;                 /* mục tiêu chạm tối thiểu (a11y) */

  /* mobile bottom-sheet + bottom-nav */
  --sheet-peek-h: 104px;          /* chiều cao lúc thu gọn */
  --sheet-max-h: 82vh;
  --sheet-radius: 18px;
  --bottomnav-h: 60px;

  /* ─────────────────────────────────────────────────────────
     10 · ÁNH XẠ BOOTSTRAP 5.3  (component BS ăn theo token)
     ───────────────────────────────────────────────────────── */
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-tertiary-bg: var(--bg);
  --bs-secondary-bg: var(--line-soft);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-link-color-rgb: 47, 125, 87;
  --bs-link-hover-color-rgb: 29, 81, 55;
  --bs-focus-ring-color: var(--green-ring);
  --bs-emphasis-color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════
   DARK  (khớp aoc-wow.css [data-bs-theme="dark"])
   ═══════════════════════════════════════════════════════════ */
:root[data-bs-theme="dark"] {
  color-scheme: dark;

  --bg: #14150f;
  --surface: #1b1c16;
  --surface-2: #1f211a;
  --surface-3: #24261e;

  --ink: #eceee6;
  --ink-2: #a9aba1;
  --ink-3: #63655c;
  --ink-muted: #8a8c82;

  --line: #2c2e26;
  --line-2: #383a30;
  --line-soft: #20261f;

  --green: #4fa47a;
  --green-hover: #5cb387;
  --green-deep: #b7ddc8;
  --green-bright: #63bb92;
  --green-soft: rgba(79, 164, 122, .15);
  --green-tint: rgba(79, 164, 122, .1);
  --green-ink: #cdeadb;
  --green-ring: rgba(79, 164, 122, .35);

  --gold-soft: rgba(201, 168, 76, .14);
  --danger-soft: rgba(192, 57, 43, .16);
  --warn-soft: rgba(180, 119, 27, .16);
  --info-soft: rgba(47, 111, 158, .16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 12px -8px rgba(0, 0, 0, .5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 20px -10px rgba(0, 0, 0, .5);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 34px -12px rgba(0, 0, 0, .6);
  --shadow-pop: 0 26px 60px -22px rgba(0, 0, 0, .75), 0 8px 20px -12px rgba(0, 0, 0, .5);
}

/* Tôn trọng "giảm chuyển động" ở tầng token — component đọc các biến này. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}