/* =========================================================
   FILE: 00-dnh-tokens.css
   ROLE: Source of truth for Danahub design tokens
   RULES:
   - chỉ chứa token
   - không chứa component selector
   - không chứa page-specific style
   - mọi thay đổi phải có lý do tái sử dụng
   ========================================================= */

/* =========================================================
  1.1. File này dùng để làm gì

File này là nền của toàn bộ visual system, chứa:

color tokens
typography tokens gốc
spacing scale
radius
border
shadow
motion
layout/container
z-index
sizing tokens cho các component dùng lặp lại

Đây cũng đúng với tinh thần docs cũ: token file phải giúp mọi người hiểu token nào tồn tại, dùng để làm gì, khi nào được thêm token mới, và cấm hard-code nếu token đã có.

1.2. File này không dùng để làm gì

Không được chứa:

.dnh-btn
.dnh-card
.dnh-modal
bất kỳ component selector nào
page-specific token
token “mood-based” cảm tính
token chỉ dành cho 1 page rồi bỏ

Tài liệu cũ đã chốt rõ: không tạo token page-specific, không tạo token mơ hồ như home-special-gold, popup-new-shadow, project-hero-border.

 ========================================================= */





:root {
  /* =========================================================
     01. COLOR FOUNDATION
     Thay đổi --dnh-color-surface-alt: #f2eee8; thành #F9F9F9 (Xám trắng tinh tế) hoặc #FCFAF8 (Trắng ngà siêu nhạt).
     ========================================================= */
  --dnh-color-bg: #EFEBE4;
  --dnh-color-surface: #FDFBF7;
  --dnh-color-surface-alt: #E5E0D6;
  --dnh-color-surface-soft: #F5F0E8;
  --dnh-color-surface-raised: #FDFBF7;

  --dnh-color-text: #1A1A1A;
  --dnh-color-text-soft: #6B665E;
  --dnh-color-text-muted: #8A847C;
  --dnh-color-text-inverse: #FFFFFF;

  --dnh-color-border: #D6D0C4;
  --dnh-color-border-strong: #C5BDAF;
  --dnh-color-divider: #E3DDD2;

  --dnh-color-primary: #B8972E;
  --dnh-color-primary-hover: #967B25;
  --dnh-color-primary-active: #7D661F;
  --dnh-color-primary-soft: #F0E6CC;

  --dnh-color-accent: #B8972E;
  --dnh-color-accent-soft: #F5EDD6;

  --dnh-color-dark: #111111;
  --dnh-color-dark-2: #1A1A1A;
  --dnh-color-dark-3: #222222;

  --dnh-color-success: #2f6b4f;
  --dnh-color-success-soft: #e8f3ed;

  --dnh-color-warning: #9a6a17;
  --dnh-color-warning-soft: #fbf2df;

  --dnh-color-error: #a33a32;
  --dnh-color-error-soft: #f9e8e6;

  --dnh-color-disabled-bg: #ece6dd;
  --dnh-color-disabled-text: #9b9388;
  --dnh-color-disabled-border: #ddd6cc;

  --dnh-color-surface-inverse: #0F0F11;
  --dnh-color-border-subtle: #EEEEEE;

  --dnh-color-overlay: rgba(24, 20, 16, 0.56);
  --dnh-color-overlay-soft: rgba(24, 20, 16, 0.28);

  /* =========================================================
     02. SURFACE VARIANTS
     ========================================================= */
  --dnh-surface-default-bg: var(--dnh-color-surface);
  --dnh-surface-default-border: var(--dnh-color-border);

  --dnh-surface-subtle-bg: var(--dnh-color-surface-soft);
  --dnh-surface-subtle-border: var(--dnh-color-divider);

  --dnh-surface-raised-bg: var(--dnh-color-surface-raised);
  --dnh-surface-raised-border: var(--dnh-color-border);

  --dnh-surface-dark-bg: var(--dnh-color-dark);
  --dnh-surface-dark-bg-2: var(--dnh-color-dark-2);
  --dnh-surface-dark-border: rgba(255, 255, 255, 0.10);

  --dnh-surface-premium-bg: #fbf7ef;
  --dnh-surface-premium-border: #e2d4bb;

  --dnh-surface-trust-bg: #f8f5f0;
  --dnh-surface-trust-border: #ddd3c7;

  --dnh-surface-concierge-bg: #f4efe7;
  --dnh-surface-concierge-border: #d6c8b3;

  --dnh-surface-hover-bg: #fcf8f2;
  --dnh-surface-pressed-bg: #f0e9df;

  /* =========================================================
     03. TYPOGRAPHY FOUNDATION
     ========================================================= */
  --dnh-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dnh-font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dnh-font-family-mono: "SFMono-Regular", Consolas, monospace;

  --dnh-font-size-display: 68px;
  --dnh-font-size-h1: 56px;
  --dnh-font-size-h2: 36px;
  --dnh-font-size-h3: 28px;
  --dnh-font-size-h4: 20px;
  --dnh-font-size-h5: 18px;
  --dnh-font-size-h6: 16px;

  --dnh-font-size-lead: 20px;
  --dnh-font-size-body: 16px;
  --dnh-font-size-small: 14px;
  --dnh-font-size-xs: 12px;

  --dnh-font-size-price-lg: 36px;
  --dnh-font-size-price-md: 28px;
  --dnh-font-size-price-sm: 22px;

  --dnh-font-size-metric-lg: 40px;
  --dnh-font-size-metric-md: 28px;
  --dnh-font-size-metric-sm: 20px;

  --dnh-line-height-display: 1.05;
  --dnh-line-height-heading: 1.2;
  --dnh-line-height-lead: 1.6;
  --dnh-line-height-body: 1.6;
  --dnh-line-height-small: 1.50;

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

  --dnh-letter-spacing-tight: -0.02em;
  --dnh-letter-spacing-normal: 0;
  --dnh-letter-spacing-wide: 0.04em;

  --dnh-measure-text: 72ch;
  --dnh-measure-reading: 68ch;
  --dnh-measure-narrow: 42ch;

  /* =========================================================
     04. SPACING SCALE
     ========================================================= */
  --dnh-space-0: 0;
  --dnh-space-1: 4px;
  --dnh-space-2: 8px;
  --dnh-space-3: 12px;
  --dnh-space-4: 16px;
  --dnh-space-5: 20px;
  --dnh-space-6: 24px;
  --dnh-space-8: 32px;
  --dnh-space-10: 40px;
  --dnh-space-12: 48px;
  --dnh-space-16: 64px;
  --dnh-space-20: 80px;
  --dnh-space-24: 96px;
  --dnh-space-32: 128px;

  --dnh-section-pad-y-sm: 40px;
  --dnh-section-pad-y-md: 80px;
  --dnh-section-pad-y-lg: 96px;

  --dnh-gap-grid-sm: 16px;
  --dnh-gap-grid-md: 24px;
  --dnh-gap-grid-lg: 32px;

  --dnh-gap-stack-sm: 12px;
  --dnh-gap-stack-md: 20px;
  --dnh-gap-stack-lg: 32px;

  /* =========================================================
     05. RADIUS SCALE
     ========================================================= */
  --dnh-radius-sm: 4px;
  --dnh-radius-md: 8px;
  --dnh-radius-lg: 12px;
  --dnh-radius-xl: 16px;
  --dnh-radius-pill: 999px;

  /* =========================================================
     06. BORDER TOKENS
     ========================================================= */
  --dnh-border-width-1: 1px;
  --dnh-border-width-2: 2px;

  --dnh-border-1: 1px solid var(--dnh-color-border);
  --dnh-border-strong: 1px solid var(--dnh-color-border-strong);
  --dnh-border-divider: 1px solid var(--dnh-color-divider);
  --dnh-border-dark: 1px solid var(--dnh-surface-dark-border);

  /* =========================================================
     07. SHADOW TOKENS
     ========================================================= */
  --dnh-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.04);
  --dnh-shadow-md: 0 12px 30px rgba(17, 17, 17, 0.05);
  --dnh-shadow-lg: 0 16px 36px rgba(17, 17, 17, 0.08);

  --dnh-shadow-focus-light: 0 0 0 3px rgba(184, 151, 46, 0.18);
  --dnh-shadow-focus-dark: 0 0 0 3px rgba(245, 241, 234, 0.18);

  /* =========================================================
     08. MOTION TOKENS
     ========================================================= */
  --dnh-duration-fast: 160ms;
  --dnh-duration-base: 240ms;
  --dnh-duration-slow: 360ms;

  --dnh-ease-standard: ease;
  --dnh-ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

  /* =========================================================
     09. Z-INDEX TOKENS
     ========================================================= */
  --dnh-z-base: 1;
  --dnh-z-sticky: 20;
  --dnh-z-dropdown: 40;
  --dnh-z-overlay: 80;
  --dnh-z-modal: 100;
  --dnh-z-toast: 120;

  /* =========================================================
     10. BREAKPOINTS
     ========================================================= */
  --dnh-bp-sm: 480px;
  --dnh-bp-md: 768px;
  --dnh-bp-lg: 1024px;
  --dnh-bp-xl: 1280px;
  --dnh-bp-2xl: 1440px;

  /* =========================================================
     11. CONTAINERS + PADDINGS
     ========================================================= */
  --dnh-container-sm: 720px;
  --dnh-container-md: 960px;
  --dnh-container-lg: 1120px;
  --dnh-container-xl: 1240px;

  --dnh-container-pad-mobile: 16px;
  --dnh-container-pad-tablet: 24px;
  --dnh-container-pad-desktop: 32px;

  /* =========================================================
     12. INTERACTIVE SIZING TOKENS
     ========================================================= */
  --dnh-btn-height-sm: 40px;
  --dnh-btn-height-md: 48px;
  --dnh-btn-height-lg: 56px;

  --dnh-btn-pad-x-sm: 14px;
  --dnh-btn-pad-x-md: 18px;
  --dnh-btn-pad-x-lg: 24px;

  --dnh-field-height-sm: 44px;
  --dnh-field-height-md: 52px;
  --dnh-field-height-lg: 60px;

  --dnh-field-pad-x-sm: 12px;
  --dnh-field-pad-x-md: 16px;
  --dnh-field-pad-x-lg: 20px;

  --dnh-field-radius: 14px;

  --dnh-modal-width-sm: 420px;
  --dnh-modal-width-md: 640px;
  --dnh-modal-width-lg: 860px;

  --dnh-modal-pad-sm: 20px;
  --dnh-modal-pad-md: 28px;
  --dnh-modal-pad-lg: 36px;

  --dnh-sticky-cta-height: 64px;
  --dnh-sticky-cta-pad-x: 16px;
  --dnh-sticky-cta-pad-y: 10px;

  /* =========================================================
     13. ACCESSIBILITY / FOCUS
     ========================================================= */
  --dnh-focus-ring-light: var(--dnh-shadow-focus-light);
  --dnh-focus-ring-dark: var(--dnh-shadow-focus-dark);
  
  /* Promoted từ Home Prototype */
  --dnh-color-primary-dark: #B59024;
  --dnh-shadow-luxury: 0 10px 30px rgba(0,0,0,0.04);
  --dnh-shadow-luxury-hover: 0 15px 35px rgba(0,0,0,0.08);
}

@media (max-width: 767px) {
  :root {
    --dnh-font-size-display: 42px;
    --dnh-font-size-h1: 42px;
    --dnh-font-size-h2: 28px;
    --dnh-font-size-h3: 24px;
    --dnh-font-size-h4: 20px;
    --dnh-font-size-h5: 18px;
    --dnh-font-size-h6: 16px;

    --dnh-font-size-lead: 18px;
    --dnh-font-size-body: 16px;
    --dnh-font-size-small: 14px;
    --dnh-font-size-xs: 12px;

    --dnh-section-pad-y-sm: 32px;
    --dnh-section-pad-y-md: 48px;
    --dnh-section-pad-y-lg: 56px;

    --dnh-gap-grid-sm: 12px;
    --dnh-gap-grid-md: 16px;
    --dnh-gap-grid-lg: 20px;

    --dnh-container-pad-mobile: 16px;
    --dnh-modal-pad-sm: 16px;
    --dnh-modal-pad-md: 20px;
    --dnh-modal-pad-lg: 24px;

    --dnh-sticky-cta-height: 60px;
  }
}