/**
 * HotDuk design system v2 tokens (list + detail shared).
 * Brand red: #e74c3c (replaces legacy #ff4500).
 * Class names stay stable; only token values change.
 */
:root {
  /* Hot / brand */
  --hot-50: #fef2f2;
  --hot-100: #fde2e1;
  --hot-200: #fac9c6;
  --hot-400: #f87171;
  --hot-500: #e74c3c;
  --hot-600: #dc2626;
  --hot-700: #b91c1c;
  --ember-400: #fb923c;

  /* Gradients */
  --grad-hot: linear-gradient(135deg, #e74c3c 0%, #dc2626 100%);
  --grad-hot-soft: linear-gradient(180deg, #fff5f5 0%, #fef2f2 100%);

  /* Mint */
  --mint-50: #ecfdf3;
  --mint-100: #d1fadf;
  --mint-500: #10b981;
  --mint-600: #059669;
  --mint-700: #067647;

  /* Neutrals */
  --gray-0: #ffffff;
  --gray-25: #fafafb;
  --gray-50: #f4f4f6;
  --gray-100: #ececef;
  --gray-200: #e3e3e6;
  --gray-300: #cfcfd4;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #1e1e1e;

  /* Chips */
  --chip-platform-bg: #fff3e0;
  --chip-platform-fg: #e65100;
  --chip-category-bg: #e6f1fb;
  --chip-category-fg: #185fa5;

  /* Semantic */
  --warn-bg: #fff7ed;
  --warn-fg: #c2410c;
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-25);
  --surface-card: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hot: var(--hot-50);
  --border-default: var(--gray-100);
  --border-strong: var(--gray-200);
  --border-hot: var(--hot-200);
  --text-strong: var(--gray-900);
  --text-body: var(--gray-600);
  --text-muted: var(--gray-400);
  --action: var(--hot-500);
  --action-hover: var(--hot-600);
  --price: var(--hot-600);
  --deal-best: #111111;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-pill: 999px;

  /* Shadows / effects */
  --shadow-card: 0 1px 3px rgba(30, 30, 30, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(30, 30, 30, 0.08);
  --shadow-hot: 0 8px 20px rgba(231, 76, 60, 0.28);
  --shadow-hot-sm: 0 2px 6px rgba(231, 76, 60, 0.35);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  #productGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

#categoryTabs::-webkit-scrollbar {
  display: none;
}

.h-\[40px\] {
  height: 40px;
}