/* ==========================================================================
   TechStore - Theme Variables & Color Tokens
   Tệp chứa toàn bộ biến màu sắc, gradient, shadow và utility theme
   Dễ dàng tùy biến hoặc đổi sang bộ màu khác (Blue, Green, Dark mode,...)
   ========================================================================== */

:root {
  /* ==================== 0. TYPOGRAPHY (BE VIETNAM PRO) ==================== */
  --bs-font-sans-serif: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --font-family-base: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: 1.6rem;
  --bs-body-line-height: 1.6;
  --text-muted: #8A8F99;
  /* ==================== 0.1 TYPOGRAPHY SCALE (1rem = 10px ở 62.5%) ==================== */
  --fs-xs: 1.2rem;
  /* 12px - chú thích nhỏ, tag, badge phụ */
  --fs-sm: 1.4rem;
  /* 14px - text nhỏ, phụ đề, label, button nhỏ */
  --fs-base: 1.6rem;
  /* 16px - cỡ chữ chuẩn cho văn bản, menu, form */
  --fs-md: 2.0rem;
  /* 20px - tiêu đề phụ h5, giá nổi bật */
  --fs-lg: 2.2rem;
  /* 22px - tiêu đề thẻ card h4, popup */
  --fs-xl: 2.6rem;
  /* 26px - tiêu đề mục h3 */
  --fs-2xl: 3.0rem;
  /* 30px - tiêu đề trang h2 */
  --fs-3xl: 3.6rem;
  /* 36px - tiêu đề lớn h1 */
  --fs-4xl: 4.2rem;
  /* 42px - hero headline, banner lớn */

  --color-brand-warm-500: #ff8f26;
  --color-brand-warm-600: #ff5117;
  --color-white: #ffffff;
  /* ==================== 1. PRIMARY ORANGE PALETTE ==================== */
  --primary: #FF6B00;
  --bs-primary: #f05123;
  --bs-primary-rgb: 240, 81, 35;
  --primary-light: #FF8C00;
  --primary-dark: #E55A00;
  --primary-subtle: #FFF4ED;
  --primary-gradient: linear-gradient(135deg, #FF6B00 0%, #FF8C00 100%);
  --primary-gradient-alt: linear-gradient(135deg, #FF5500 0%, #FF6B00 60%, #FFA834 100%);
  /* ==================== 2. BUTTON & ACCENT TEAL PALETTE ==================== */
  --button-color: #1dbfaf;
  --button-color-rgb: 29, 191, 175;
  --button-color-hover: #17a597;
  --button-color-active: #13897d;
  --button-color-subtle: #e8f9f7;
  --button-color-shadow: rgba(29, 191, 175, 0.35);
  --button-color-focus-ring: rgba(29, 191, 175, 0.25);
  --button-text-color: #ffffff;
  --button-image: linear-gradient(70.06deg, #2cccff -5%, #22dfbf 106%);
  --shopee-green: #26aa99;
  --shopee-green-light: #e6f7f5;

  /* ==================== 3. NEUTRAL & BACKGROUND COLORS ==================== */
  --white-color: #ffffff;
  --page-bg: #f9f9fb;
  --bs-body-bg: #f9f9fb;
  --dark-color: #1A1A1A;
  --dark-surface: #121315;
  --gray-bg: #f9f9fb;
  --card-border: #ECEEF0;
  --text-muted-custom: #6C757D;

  /* ==================== 3. ELEVATION SHADOWS ==================== */
  --shadow-subtle: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 28px rgba(255, 107, 0, 0.16);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* ==================== 4. BORDER RADIUS ==================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-btn: 0.5rem;
  --bs-btn-border-radius: 0.5rem;

  /* ==================== 5. BANNER & NEWS THEME TOKENS ==================== */
  --navy-blue: #0f3e82;
  --navy-blue-dark: #0b2f63;
  --news-blue: #0284c7;
  --news-active-bg: rgba(56, 189, 248, 0.07);

  /* ==================== 6. ADMIN MODERN LIGHT THEME TOKENS ==================== */
  --admin-bg: #F7F7F8;
  --admin-surface: #FFFFFF;
  --admin-border: #ECEAE8;
  --admin-border-soft: #F2F0EE;
  --admin-text: #1F2430;
  --admin-text-soft: #4A5063;
  --admin-muted: #8A8F99;
  --admin-muted-dim: #B4B8C2;
  --admin-success: #1DA97D;
  --admin-success-subtle: #E8F8F2;
  --admin-danger: #E5484D;
  --admin-danger-subtle: #FDECEC;
  --admin-warn: #F0A623;
  --admin-warn-subtle: #FFF6E5;
  --admin-shadow: 0 1px 2px rgba(20, 20, 30, 0.04), 0 8px 24px -12px rgba(20, 20, 30, 0.08);

  /* ==================== 7. PROMO & FLASH SALE CARD TOKENS ==================== */
  --fsg-price-green: #15803d;
  --fsg-save-blue: #0284c7;
  --fsg-save-green: #008a4f;
  --fsg-btn-red: #e02424;
  --fsg-btn-red-hover: #c81e1e;
  --fsg-pill-gradient: linear-gradient(90deg, #8da6c8 0%, #ff9aa2 100%);

  /* ==================== 8. PRODUCT LISTING GRID & LAPTOP CARD TOKENS ==================== */
  --card-price-red: #D32F2F;
  --card-save-green: #15803D;
  --card-specs-bg: #F1F5F9;
  --card-sort-blue: #0284C7;
  --card-badge-orange: #F05123;
  --card-badge-blue: #0284C7;

  /* ==================== 9. USER PROFILE CARD TOKENS ==================== */
  --profile-ink: #1A1D23;
  --profile-muted: #6B7280;
  --profile-line: #E5E7EB;
  --profile-accent: var(--primary, #FF6B00);
  --profile-accent-soft: var(--primary-subtle, #FFF4ED);
  --profile-good: #16A34A;
  --profile-good-soft: #ECFDF3;
  --profile-danger: #DC2626;
}

/* ==================== COLOR UTILITY CLASSES ==================== */
.bg-navy-blue {
  background-color: var(--navy-blue) !important;
}

.text-news-blue {
  color: var(--news-blue) !important;
}

.text-brand-orange {
  color: var(--bs-primary) !important;
}

.bg-brand-orange {
  background-color: var(--bs-primary) !important;
}

.bg-light-orange {
  background-color: var(--primary-subtle) !important;
}

.border-brand-orange {
  border-color: var(--bs-primary) !important;
}

/* ==================== THEME BUTTON OVERRIDES ==================== */
.btn-brand-orange {
  background: var(--primary-gradient);
  border: none;
  color: #ffffff;
  transition: all 0.25s ease;
}

.btn-brand-orange:hover,
.btn-brand-orange:focus {
  background: linear-gradient(135deg, #E55A00 0%, #FF6B00 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35);
  transform: translateY(-1px);
}

.btn-outline-warning,
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background: transparent;
  transition: all 0.25s ease;
}

.btn-outline-warning:hover,
.btn-outline-primary:hover,
.btn-outline-warning:active,
.btn-outline-primary:active {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
}

.btn-warning {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
  font-weight: 600;
}

.btn-warning:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #ffffff;
}

/* ==================== BASE TYPOGRAPHY & FONT SCALING ==================== */
html {
  font-size: 62.5%;
  /* 1rem = 10px chuẩn */
}

/* Responsive typography: Tự động co giãn theo viewport */
@media (max-width: 575.98px) {
  html {
    font-size: 56.25%;
    /* Mobile: 1rem = 9px (giảm ~10% để vừa vặn màn hình nhỏ) */
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  html {
    font-size: 60%;
    /* Tablet: 1rem = 9.6px */
  }
}

@media (min-width: 992px) {
  html {
    font-size: 62.5%;
    /* Desktop: 1rem = 10px */
  }
}

html,
body,
#appMainContent,
main {
  background-color: var(--page-bg, #f9f9fb) !important;
}

body {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--dark-color);
  background-color: var(--page-bg, #f9f9fb) !important;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Thống nhất quy chuẩn Heading h1-h6 tương thích với Bootstrap 5 */
h1,
.h1,
.fs-1 {
  font-size: clamp(2.4rem, 4vw, var(--fs-3xl)) !important;
  font-weight: 700;
  line-height: 1.25;
}

h2,
.h2,
.fs-2 {
  font-size: clamp(2.0rem, 3.2vw, var(--fs-2xl)) !important;
  font-weight: 700;
  line-height: 1.3;
}

h3,
.h3,
.fs-3 {
  font-size: clamp(1.8rem, 2.6vw, var(--fs-xl)) !important;
  font-weight: 600;
  line-height: 1.35;
}

h4,
.h4,
.fs-4 {
  font-size: var(--fs-lg) !important;
  font-weight: 600;
  line-height: 1.4;
}

h5,
.h5,
.fs-5 {
  font-size: var(--fs-md) !important;
  font-weight: 700;
  line-height: 1.4;
}

h6,
.h6,
.fs-6 {
  font-size: var(--fs-base) !important;
  font-weight: 600;
  line-height: 1.5;
}

/* Chuẩn hóa toàn bộ text văn bản thông thường */
p,
li,
label,
input,
select,
textarea,
table,
.table,
.card,
.modal,
.offcanvas,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
.input-group-text,
.btn:not(.btn-sm):not(.btn-lg) {
  font-size: var(--fs-base);
}

/* Các thành phần chữ nhỏ giữ tỉ lệ dễ đọc */
small,
.small {
  font-size: var(--fs-sm) !important;
}

.btn-sm,
.form-control-sm,
.form-select-sm {
  font-size: var(--fs-sm);
}

.badge {
  font-size: var(--fs-xs);
}