/* ============================================================
   TOKENS.CSS — NGUỒN SỰ THẬT DUY NHẤT cho toàn bộ design system.
   Load TRƯỚC mọi file css khác, và trước cả admin.css.

   Quy tắc:
   - Không được có rule component nào trong file này.
   - Không được thêm màu có sắc (hue) mới. Palette là xám vô sắc,
     ngoại lệ duy nhất là nhóm STATUS ở §5 (chúng mang ý nghĩa,
     không phải trang trí).
   - Breakpoint chuẩn cho rule MỚI: 375 / 480 / 768 / 1024.
     ⚠ Custom property KHÔNG dùng được trong điều kiện @media
       (`@media (min-width: var(--bp))` im lặng không bao giờ match).
   ============================================================ */

/* ── Font Faces: Gustavo (chuyển nguyên từ base.css, bản trùng ở
      admin.css đã xoá) ── */
@font-face {
  font-family: 'Gustavo';
  src: url('../assets/Font/Gustavo/Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gustavo';
  src: url('../assets/Font/Gustavo/Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gustavo';
  src: url('../assets/Font/Gustavo/Regular-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gustavo';
  src: url('../assets/Font/Gustavo/Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gustavo';
  src: url('../assets/Font/Gustavo/Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ══ 1. NEUTRAL SCALE — vô sắc, khoá ══════════════════════ */
  --n-0: #FFFFFF;
  --n-50: #F9F9F9;
  --n-100: #EEEEEE;
  --n-200: #DDDDDD;
  /* hairline trên nền sáng */
  --n-300: #CCCCCC;
  --n-400: #AAAAAA;
  /* disabled */
  --n-500: #999999;
  --n-700: #4A4A4A;
  /* text phụ, đạt AA trên nền cream */
  --n-900: #111111;

  /* ══ 2. ALIAS TƯƠNG THÍCH NGƯỢC — KHÔNG BAO GIỜ XOÁ ═══════
     ~100 literal trong codebase sẽ migrate về đây. Tên cũ giữ
     nguyên để không phải sửa call-site. */
  --white: var(--n-0);
  --cream: var(--n-50);
  --cream-2: var(--n-100);
  --cream2: var(--n-100);
  /* admin.css đặt tên lệch, giữ cả hai */
  --beige: var(--n-300);
  --rose: var(--n-500);
  --ink: var(--n-900);

  /* ══ 3. KÊNH MÀU cho Tailwind <alpha-value> ═══════════════
     BẮT BUỘC: 230 chỗ trong markup dùng opacity modifier
     (text-ink/70, bg-cream/10, border-ink/20...). Nếu config
     khai `ink: "var(--ink)"` thì modifier bị NUỐT IM LẶNG.
     js/tailwind-theme.js phải dùng dạng
        rgb(var(--ink-rgb) / <alpha-value>)
     nên 6 biến dưới đây là bắt buộc, không được xoá. */
  --white-rgb: 255 255 255;
  --cream-rgb: 249 249 249;
  --cream-2-rgb: 238 238 238;
  --beige-rgb: 204 204 204;
  --rose-rgb: 153 153 153;
  --ink-rgb: 17 17 17;

  /* ══ 4. ALPHA RAMP — phủ hết rgba literal đang có ═════════ */
  --ink-a04: rgba(17, 17, 17, 0.04);
  --ink-a06: rgba(17, 17, 17, 0.06);
  --ink-a10: rgba(17, 17, 17, 0.10);
  --ink-a12: rgba(17, 17, 17, 0.12);
  --ink-a16: rgba(17, 17, 17, 0.16);
  --ink-a20: rgba(17, 17, 17, 0.20);
  --ink-a30: rgba(17, 17, 17, 0.30);
  --ink-a40: rgba(17, 17, 17, 0.40);
  --ink-a45: rgba(17, 17, 17, 0.45);
  --ink-a60: rgba(17, 17, 17, 0.60);
  --ink-a92: rgba(17, 17, 17, 0.92);

  --white-a06: rgba(255, 255, 255, 0.06);
  --white-a10: rgba(255, 255, 255, 0.10);
  --white-a20: rgba(255, 255, 255, 0.20);
  --white-a45: rgba(255, 255, 255, 0.45);
  --white-a60: rgba(255, 255, 255, 0.60);
  --white-a92: rgba(255, 255, 255, 0.92);

  --cream-a20: rgba(249, 249, 249, 0.20);

  /* ══ 5. SURFACE / TEXT ngữ nghĩa ══════════════════════════ */
  --surface: var(--cream);
  --surface-raised: var(--white);
  --surface-sunken: var(--cream-2);
  --text: var(--ink);
  --text-muted: var(--n-700);
  --text-faint: var(--n-500);
  --line: var(--ink-a12);
  --line-strong: var(--ink-a30);
  --on-dark: var(--white);
  --on-dark-muted: var(--white-a60);
  --line-on-dark: var(--white-a20);

  /* ══ 6. STATUS — GIÁ TRỊ CÓ SẮC DUY NHẤT ĐƯỢC PHÉP ═══════ */
  --ok: #3D7A26;
  --ok-bg: #EAF4E5;
  --ok-line: #CBE1BC;
  --warn: #D97706;
  --warn-bg: #FEF3C7;
  --danger: #DC2626;
  --danger-bg: #FEE2E2;
  --danger-line: #FCA5A5;
  --info: #2563EB;
  --info-bg: #DBEAFE;
  --star: #D4A017;

  /* ══ 7. TYPE ══════════════════════════════════════════════ */
  --font-serif: 'Gustavo', serif;
  --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: clamp(13px, 0.5vw + 11.5px, 14px);
  --fs-base: 16px;
  --fs-md: clamp(17px, 0.6vw + 15px, 18px);
  --fs-lg: clamp(20px, 1.2vw + 16px, 24px);
  --fs-xl: clamp(26px, 2.2vw + 18px, 34px);
  --fs-2xl: clamp(34px, 4vw + 20px, 52px);
  --fs-3xl: clamp(44px, 6.5vw + 20px, 76px);
  --fs-4xl: clamp(56px, 11vw + 12px, 132px);

  --lh-tight: 0.85;
  --lh-display: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --lh-relaxed: 1.7;

  --ls-tightest: -0.04em;
  --ls-tighter: -0.02em;
  --ls-tight: -0.01em;
  --ls-wide: 0.06em;
  --ls-tracked: 0.15em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* ⚠ Gustavo chỉ ship 300/400/400i/500/700. Dùng --fw-semibold
       với var(--font-serif) sẽ khiến browser giả lập fake bold. */

  /* ══ 8. SPACING — base 4px ════════════════════════════════ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Nhịp section — MỘT nguồn duy nhất. Giải xung đột giữa
     .section-py (36/64) và tailwind spacing.section-* (64/96). */
  /* Đáy cũ 48px = py-12, quá chật ở mobile; desktop 96px vốn đã đạt.
     Nâng đáy lên 72px, trần 112px. Lan ra 3 trang public qua .section-py. */
  --section-y: clamp(72px, 8vw, 112px);
  --section-x: clamp(20px, 5vw, 64px);
  --gutter: clamp(16px, 4vw, 32px);
  --stack: clamp(24px, 3vw, 40px);
  /* Trần cũ 1440px: trên màn 1920 các khối co vào giữa, mép nội dung nằm ở
     261px trong khi hero và collection banner tràn sát 0 — đó là cảm giác
     "thụt ra thụt vào". Giờ khối chạy hết bề ngang, chỉ chừa 28px lề của
     px-5 xs:px-7, đúng bằng lề chữ trong hero. 2000px là chốt chặn cho màn
     siêu rộng, trên ngưỡng đó lề lại nở ra — hiếm, chấp nhận. */
  --max-content: min(2000px, 100%);

  /* ══ 9. RADIUS ════════════════════════════════════════════ */
  --r-2xs: 2px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;
  --r-circle: 50%;
  --radius: var(--r-sm);
  /* back-compat: admin.css */

  /* ══ 10. ELEVATION ════════════════════════════════════════
     Thang "hard offset" là tính cách brutalist sẵn có của site
     — giữ cho card/button trong luồng. Thang "soft" CHỈ dùng
     cho lớp fixed/floating (drawer, modal, chatbot, toast). */
  --shadow-hard-sm: 4px 4px 0 var(--ink-a20);
  --shadow-hard-md: 6px 6px 0 var(--ink-a30);
  --shadow-hard-lg: 8px 8px 0 var(--ink-a10);
  --shadow-hard-xl: 12px 12px 0 var(--ink-a12);
  --shadow-soft-sm: 0 1px 3px var(--ink-a06), 0 1px 2px var(--ink-a04);
  --shadow-soft-md: 0 8px 24px var(--ink-a10);
  --shadow-soft-lg: 0 18px 48px var(--ink-a12);
  --shadow: var(--shadow-soft-sm);
  /* back-compat: admin.css */
  --shadow-lg: var(--shadow-soft-md);
  /* back-compat: admin.css */

  /* ══ 11. MOTION ═══════════════════════════════════════════ */
  --ease-editorial: cubic-bezier(0.32, 0, 0.26, 1);
  /* đường cong brand */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-medium: 320ms;
  --dur-slow: 420ms;
  --dur-slower: 600ms;
  --dur-reveal: 700ms;
  --stagger: 60ms;

  /* ══ 12. Z-INDEX — thang hệ thống, không dùng số tuỳ tiện ══ */
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-popup: 700;
  --z-chatbot: 800;
  --z-toast: 900;
  --z-loader: 1000;

  /* ══ 13. FOCUS ════════════════════════════════════════════ */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--ink);
  --focus-offset: 2px;
}