/*
 * Design tokens – duonglong.vn
 * Nguồn duy nhất cho màu, chữ, khoảng cách, bo góc, đổ bóng, lớp.
 *
 * Hai tầng:
 *   1. Primitive  – đặt tên theo màu/giá trị (--red-600, --space-4). Chỉ dùng trong file này.
 *   2. Semantic   – đặt tên theo vai trò (--color-action). Component chỉ dùng tầng này.
 *
 * Muốn đổi màu một vai trò: sửa đúng dòng semantic của nó, không sửa component.
 * Breakpoint không khai báo được bằng biến CSS trong @media, xem cuối file.
 */

:root {
  /* ---------- Primitive: màu ---------- */

  /* Đỏ thương hiệu – 500 là màu logo */
  --red-50:  #FEF2F2;
  --red-100: #FDE3E3;
  --red-200: #FBC9C9;
  --red-300: #F59E9E;
  --red-400: #EE6363;
  --red-500: #E82020;
  --red-600: #D41A1A;
  --red-700: #B11616;
  --red-800: #8F1717;
  --red-900: #6E1414;

  /* Xanh navy – 600 là màu logo */
  --navy-50:  #EEF0FA;
  --navy-100: #DCE0F4;
  --navy-200: #B9C1E8;
  --navy-300: #8B97D6;
  --navy-400: #5A68BE;
  --navy-500: #3A47A8;
  --navy-600: #283090;
  --navy-700: #212878;
  --navy-800: #1B2061;
  --navy-900: #14184A;

  /* Xám ánh navy */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F7FA;
  --gray-100: #EDEFF4;
  --gray-200: #DDE1EA;
  --gray-300: #C3C9D6;
  --gray-400: #98A0B3;
  --gray-500: #6B7387;
  --gray-600: #4E5568;
  --gray-700: #373D4E;
  --gray-800: #232836;
  --gray-900: #12151F;

  /* Vàng kim – chỉ dùng cho bộ màu landing khuyến mãi (Tết, Black Friday) */
  --gold-50:  #FFF8E8;
  --gold-400: #F5C542;

  /* Màu riêng các bộ màu landing khuyến mãi (Tím Fest, Học đường, Hồng, Xanh biển, Xanh lá). Không dùng ngoài landing. */
  --violet-50:  #F1EEFF;
  --violet-300: #B58CFF;
  --violet-500: #7B3FF2;
  --violet-800: #2A1A5E;
  --violet-900: #1E1838;
  --violet-950: #120E24;
  --lime-300:   #EEF26A;
  --mint-50:  #E8FBF7;
  --mint-200: #9BEBDD;
  --mint-500: #13B5A6;
  --mint-800: #0E5E57;
  --crimson-50:  #FDECEE;
  --crimson-600: #D7263D;
  --crimson-700: #C21D33;
  --cobalt-50:  #E9EDFF;
  --cobalt-600: #2E4BD8;
  --pink-50:  #FFF0F5;
  --pink-100: #FFE3EE;
  --pink-200: #F9C9DA;
  --pink-300: #FF8FB5;
  --pink-500: #E0457B;
  --pink-700: #C2306A;
  --pink-900: #3A1030;
  --purple-500: #7A4FD6;
  --purple-50:  #EFE7FF;
  --amber-200: #FFD166;
  --sky-50:  #EAF6FF;
  --sky-100: #DDF0FF;
  --sky-200: #BFE0FA;
  --sky-400: #36C2F0;
  --sky-600: #0A6CD8;
  --sky-700: #0757B0;
  --sky-900: #06418A;
  --teal-50:  #D7F6F3;
  --teal-600: #00A3A3;
  --sun-400: #FFC233;
  --green-100: #DCF7E6;
  --green-200: #BBE7CB;
  --green-500: #22A15A;
  --green-800: #0F5132;
  --green-900: #0F2A1A;

  /* Trạng thái */
  --green-50:  #ECFDF3;
  --green-700: #15803D;
  --amber-50:  #FFF7ED;
  --amber-300: #FFD54A; /* số thứ tự khối khuyến mãi trang chủ (03/11) */
  --amber-700: #B45309;

  /* ---------- Semantic: màu ---------- */

  /* Thương hiệu và hành động */
  --color-brand:            var(--red-500);  /* logo, mảng lớn */
  --color-action:           var(--red-600);  /* nút Mua ngay – 5,30:1 với chữ trắng */
  --color-action-hover:     var(--red-700);
  --color-on-action:        var(--gray-0);
  --color-secondary:        var(--navy-600); /* nút phụ, link */
  --color-secondary-hover:  var(--navy-700);
  --color-secondary-bg:     var(--navy-50);  /* nền khối thanh toán, chip đang chọn */

  /* Giá (kiểu A, chốt 25/10) */
  --color-price:            var(--red-600);
  --color-price-compare:    var(--gray-500); /* giá gốc gạch ngang */
  --color-discount-bg:      var(--red-500);  /* badge % giảm – 4,51:1, chữ phải đậm ≥ 600 */
  --color-on-discount:      var(--gray-0);

  /* Chữ */
  --color-text:             var(--gray-900);
  --color-text-muted:       var(--gray-600); /* thông số, mô tả phụ */
  --color-text-subtle:      var(--gray-500); /* placeholder – không dùng cho nội dung cần đọc */
  --color-link:             var(--navy-600);
  --color-link-hover:       var(--navy-700);

  /* Nền và viền */
  --color-surface:          var(--gray-0);
  --color-surface-alt:      var(--gray-50);
  --color-surface-sunken:   var(--gray-100);
  --color-border:           var(--gray-200);
  --color-border-strong:    var(--gray-300);
  --color-overlay:          rgb(18 21 31 / 0.5); /* nền mờ sau bottom sheet */
  --color-action-bg:        var(--red-50);   /* nền chip Flash sale, nút giỏ desktop */
  --color-action-border:    var(--red-200);

  /* Nền tối (chân trang) */
  --color-inverse:          var(--gray-900);
  --color-on-inverse:       var(--gray-200);
  --color-on-inverse-muted: var(--gray-300);
  --color-on-inverse-strong: var(--gray-0);
  --color-border-inverse:   var(--gray-600);

  /* Trạng thái */
  --color-success:          var(--green-700); /* còn hàng */
  --color-success-bg:       var(--green-50);
  --color-highlight:        var(--amber-300); /* điểm nhấn vàng trên nền tối, chữ đi kèm gray-900 */
  --color-warning:          var(--amber-700); /* đặt trước */
  --color-warning-bg:       var(--amber-50);
  --color-danger:           var(--red-700);   /* lỗi */
  --color-danger-bg:        var(--red-50);
  --color-disabled:         var(--gray-500);
  --color-disabled-bg:      var(--gray-100);
  --color-focus:            var(--navy-500);

  /* ---------- Chữ ---------- */

  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --weight-regular: 400;
  --weight-strong:  600; /* chỉ tự host 400 và 600 */

  --text-xs:   0.75rem;                           /* 12px – nhãn, badge */
  --text-sm:   0.875rem;                          /* 14px – thông số */
  --text-base: 1rem;                              /* 16px – nội dung, ô nhập */
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18 → 20px – tên sản phẩm */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20 → 24px – giá */
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);     /* 24 → 32px – tiêu đề trang */

  --leading-tight: 1.3; /* tiêu đề, tên sản phẩm */
  --leading-base:  1.5; /* nội dung */

  /* ---------- Khoảng cách (bội số 4px) ---------- */

  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem;  /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px – lề trang mobile */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  --page-gutter: var(--space-4);
  --page-max:    80rem; /* 1280px */
  --tap-min:     2.75rem; /* 44px – vùng chạm tối thiểu */
  --header-compact-h: 4rem; /* 64px – header gọn khi cuộn, mốc cho thanh dính bên dưới */

  /* ---------- Bo góc (vuông vắn, chốt 25/10) ---------- */

  --radius-sm:   4px; /* ô nhập, badge, nút */
  --radius-md:   8px; /* thẻ, khối, bottom sheet */
  --radius-full: 999px; /* chip */

  /* ---------- Đổ bóng ---------- */

  --shadow-sm: 0 1px 2px rgb(18 21 31 / 0.06), 0 1px 3px rgb(18 21 31 / 0.08);
  --shadow-lg: 0 -4px 16px rgb(18 21 31 / 0.10); /* thanh mua dính đáy, bottom sheet */
  --shadow-header: 0 4px 12px rgb(18 21 31 / 0.08); /* header khi cuộn */
  --shadow-menu:   0 12px 24px rgb(18 21 31 / 0.12); /* menu danh mục desktop */
  --shadow-on-dark: 0 3px 8px rgb(0 0 0 / 0.28); /* vật nổi trên nền tối (ruy băng, số thứ tự khuyến mãi) */

  /* ---------- Lớp (z-index) ---------- */

  --z-sticky:  10; /* thanh mua dính đáy */
  --z-header:  30; /* đầu trang luôn trên nội dung (kể cả nút mua) */
  --z-overlay: 40;
  --z-sheet:   50; /* bottom sheet, menu mobile */
  --z-toast:   60;

  /* ---------- Chuyển động ---------- */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/*
 * Breakpoint (mobile trước, dùng min-width). Ghi số trực tiếp trong @media:
 *   tablet   37.5em  (600px)  – lưới sản phẩm 3 cột
 *   desktop  64em    (1024px) – 4 cột
 *   wide     80em    (1280px) – 5 cột, khung tối đa --page-max
 */