:root{
  /* colors */
  --bg-color: #ffffff;
  --text-color: #111827;
  --muted-color: #6b7280;

  --primary-color: #d44000; /* Highlands warm tone */
  --primary-contrast: #ffffff;
  --highlands-dark: #3b1f14;

  --shopee-color: #ff6f00; /* Shopee-like orange */
  --shopee-contrast: #ffffff;

  --card-bg: #ffffff;
  --card-border: #e6e6e6;
  --shadow-sm: 0 6px 20px rgba(16,24,40,0.06);

  /* spacing */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* typography */
  --font-base-size: 16px;
  --heading-1: 2rem;
  --heading-2: 1.5rem;
  --heading-3: 1.125rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  /* header */
  --header-height: 64px;
}

@media (min-width:1024px){
  :root{
    --heading-1: 2.75rem;
    --heading-2: 1.75rem;
  }
}