:root {
  --color-background: #F8FAFC; /* Glacier White - Primary page background */
  --color-primary: #1E293B; /* Midnight Blue - Core text, main titles, navigation labels, footer background */
  --color-secondary: #94A3B8; /* Brushed Silver - Secondary text, borders, dividers, small icons, card shadows, hover effects */
  --color-accent: #0EA5E9; /* Sky Blue - Call-to-action buttons, highlighted links, key data visualizations, progress indicators */
  --color-dark-gray: #475569; /* Dark Gray - Lightly used on dark backgrounds for text, secondary buttons, and separators */
  
  /* Legacy variable mappings for backward compatibility */
  --primary: var(--color-accent);
  --secondary: var(--color-secondary);
  --neutralDark: var(--color-primary);
  --neutralLight: var(--color-background);
  --accent: var(--color-accent);
  --linkText: var(--color-accent);
  --cardBackground: var(--color-background);
  --borderColor: var(--color-secondary);
  
  /* Product card styling variables - updated with new color palette */
  --product-card-background: var(--color-background);
  --product-card-border: var(--color-secondary);
  --product-card-title: var(--color-primary);
  --product-card-variant: var(--color-secondary);
  --product-card-price: var(--color-primary);
  --product-card-button: var(--color-accent);
  --product-card-button-hover: var(--color-accent);
  --product-card-shadow: 0 4px 24px rgba(14, 165, 233, 0.1),
    0 2px 8px rgba(71, 85, 105, 0.05);
  --product-card-shadow-hover: 0 12px 48px rgba(14, 165, 233, 0.18),
    0 4px 16px rgba(71, 85, 105, 0.12);
  --product-card-border-radius: 28px;
  --product-card-padding: 1.75rem;
  --product-card-title-size: 1.125rem;
  --product-card-price-size: 1.25rem;
  --product-card-button-size: 0.95rem;
}

/* Added utility classes for header fixes */
.bg-neutralDark { background-color: var(--neutralDark) !important; }
.text-neutralDark { color: var(--neutralDark) !important; }
.bg-neutralLight { background-color: var(--neutralLight) !important; }
.text-primary { color: var(--color-accent) !important; }
.text-white { color: white !important; }
.w-full { width: 100% !important; }

/* Hide desktop nav on mobile */
@media (max-width: 768px) {
  .desktop-nav-bar { display: none !important; }
}

body {
  font-family: "Inter", "Roboto", system-ui, -apple-system, Segoe UI, Helvetica,
    Arial, sans-serif;
  background-color: var(--color-background);
  color: var(--color-primary);
  padding-top: 180px; /* Increased padding for fixed header */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  body {
    padding-top: 140px; /* Adjusted for mobile */
  }
}

/* 针对深色主题页面的特殊处理 */
body.bg-[#0f172a] {
  background-color: #0f172a;
  color: #f1f5f9;
}

/* 确保主内容区域有正确的上内边距 */
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Input styles with Indonesian design */
.input {
  background-color: var(--color-background);
  border: 2px solid var(--color-secondary);
  border-radius: 12px;
  padding: 0.875rem 1.25rem;
  width: 100%;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
  transform: translateY(-1px);
}

/* Button styles */
.btn-primary {
  background-color: var(--color-accent);
  color: white;
  padding: 0.875rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.btn-primary:hover {
  background-color: #0284c7; /* Sky 600 */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}

/* Modal backdrop blur */
.modal-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Product Card Custom Element Styling */
product-card {
  display: block;
  width: 100%;
  min-width: 0;
}