/* ============================================================
   SŌLATI DESIGN SYSTEM — tokens.css
   NGUỒN CHÂN LÝ DUY NHẤT cho mọi giá trị thiết kế.
   Mọi file CSS/HTML khác phải đọc biến từ đây, không hard-code.
   ------------------------------------------------------------
   GĐ 0: gom token hiện có (giữ nguyên diện mạo).
   Cấu trúc semantic — sau này bật dark mode chỉ cần override
   nhóm "SEMANTIC ALIASES" trong một @media/[data-theme].
   ============================================================ */

:root{

  /* ===== 1. NEUTRAL SCALE (xám ẤM / stone — chốt GĐ1) ===== */
  --c-n-0:   #FFFFFF;
  --c-n-50:  #F6F4F0;
  --c-n-100: #ECEAE5;   /* nền trang (warm mist) */
  --c-n-200: #E0DDD6;
  --c-n-300: #CFCBC3;
  --c-n-400: #B0ABA1;
  --c-n-500: #8A867E;
  --c-n-600: #6E6A62;
  --c-n-700: #4A463F;
  --c-n-800: #38352F;
  --c-n-900: #22201C;   /* mực ấm (ink) */

  /* ===== 2. BRAND ACCENT (đồng trầm — chốt GĐ1) ===== */
  --c-accent:        #9A7B4F;
  --c-accent-strong: #7E633D;
  --c-accent-soft:   #EFEAE1;

  /* ===== 3. SEMANTIC (trạng thái) — tông trầm hợp luxury ===== */
  --c-success: #3B6E4F;
  --c-error:   #A8453B;
  --c-warning: #B07A2E;
  --c-info:    #3E6385;
  --c-success-bg: #E4EDE7;
  --c-error-bg:   #F3E2E0;
  --c-warning-bg: #F4EAD8;

  /* ===== 4. SEMANTIC ALIASES (vai trò — dùng cái này khi code) ===== */
  --bg:          var(--c-n-100);
  --surface:     var(--c-n-0);
  --surface-2:   var(--c-n-50);
  --text:        var(--c-n-900);
  --text-soft:   var(--c-n-800);
  --text-muted:  var(--c-n-600);   /* GĐ4: n-500→n-600 cho đạt WCAG AA trên trắng */
  --line:        #E2DFD8;   /* hairline ấm */
  --accent:      var(--c-accent);

  /* ===== 5. TYPOGRAPHY ===== */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* thang cỡ chữ — co giãn theo màn hình */
  --t-display: clamp(38px, 5.6vw, 62px);
  --t-h1:      clamp(30px, 4.4vw, 46px);
  --t-h2:      clamp(24px, 3.2vw, 34px);
  --t-h3:      20px;
  --t-lg:      18px;
  --t-base:    16px;
  --t-sm:      14px;
  --t-xs:      13px;
  --t-2xs:     12px;
  --t-micro:   11px;

  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;

  /* tiêu đề lớn — "cân bằng" (chốt GĐ1): nét 400, giãn vừa */
  --fw-display: 400;
  --tr-display: 0.04em;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  --tr-tight:  -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.12em;
  --tr-wider:  0.24em;
  --tr-eyebrow:0.32em;

  /* ===== 6. SPACING (lưới 8pt) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ===== 7. RADIUS ===== */
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ===== 8. BORDER ===== */
  --bw-hair: 0.5px;
  --bw-thin: 1px;

  /* ===== 9. SHADOW / ELEVATION ===== */
  --sh-1: 0 8px 24px rgba(20,22,26,.06);
  --sh-2: 0 12px 30px rgba(20,22,26,.08);
  --sh-3: 0 20px 46px rgba(20,22,26,.10);
  --sh-4: 0 24px 60px rgba(20,22,26,.16);

  /* ===== 10. GLASS MATERIAL (chữ ký thương hiệu) ===== */
  --glass-dir: 135deg;                 /* hướng sáng khóa cứng */
  --glass-edge:     rgba(255,255,255,.65);
  --glass-edge-top: rgba(255,255,255,.95);
  --glass-bevel-top: inset 0 1px 0 rgba(255,255,255,.85);
  --glass-bevel-bot: inset 0 -1px 0 rgba(30,32,38,.06);

  --glass-1-fill: linear-gradient(var(--glass-dir), rgba(255,255,255,.50), rgba(255,255,255,.22));
  --glass-2-fill: linear-gradient(var(--glass-dir), rgba(255,255,255,.62), rgba(255,255,255,.34));
  --glass-3-fill: linear-gradient(var(--glass-dir), rgba(255,255,255,.74), rgba(255,255,255,.48));
  --glass-1-blur: 16px;
  --glass-2-blur: 22px;
  --glass-3-blur: 28px;

  --plate:        rgba(255,255,255,.58);
  --plate-strong: rgba(255,255,255,.82);

  /* ===== 11. MOTION ===== */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.5,1.5,.4,1);
  --dur-fast:   .25s;
  --dur-base:   .4s;
  --dur-slow:   .9s;

  /* ===== 12. LAYOUT ===== */
  --maxw: 1180px;
  --gutter: 28px;
  /* breakpoint (tham chiếu — media query không dùng var được):
     mobile <600 · tablet <880 · desktop <1020 · wide ≥1180 */

  /* ===== 13. Z-INDEX ===== */
  --z-base:   1;
  --z-nav:    50;
  --z-dropdown: 100;
  --z-modal:  1000;
  --z-toast:  1100;
}