/**
 * HotDuk _new — design tokens only.
 * Layout/typography/spacing are consumed by Tailwind classes in _new/index.html.
 */

:root {
  /* Brand */
  --color-brand-50: #fff4ed;
  --color-brand-100: #ffe4d4;
  --color-brand-400: #ff8a5c;
  --color-brand-500: #ff6b35;
  --color-brand-600: #e85a2a;
  --color-brand-700: #c44720;

  /* Legacy-aligned semantic colors (from current app UI tone) */
  --color-price: #dc2626;
  --color-page-bg: #f5f5f5;
  --color-card-bg: #ffffff;
  --color-card-border: #eeeeee;
  --color-card-title: #1e1e1e;
  --color-card-subtext: #666666;
  --color-card-muted: #888888;

  /* Neutrals */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #e0e0e0;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #666666;
  --color-neutral-800: #424242;
  --color-neutral-900: #1e1e1e;

  /* Surface/text/border */
  --color-surface-page: var(--color-page-bg);
  --color-surface-elevated: var(--color-card-bg);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-overlay: rgba(0, 0, 0, 0.45);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-card-muted);
  --color-text-on-brand: #ffffff;

  --color-border-default: var(--color-card-border);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-focus: var(--color-brand-500);

  /* Badge/chips (existing app palette) */
  --color-badge-popular-bg: #e74c3c;
  --color-badge-popular-text: #ffffff;
  --color-badge-bg: #fef2f2;
  --color-badge-text: #991b1b;
  --color-badge-insight-bg: #e0f2f1;
  --color-badge-insight-text: #004d40;
  --color-badge-caution-bg: #fff3e0;
  --color-badge-caution-text: #e65100;
  --color-chip-category-bg: #e6f1fb;
  --color-chip-category-text: #185fa5;
  --color-chip-platform-bg: #fff3e0;
  --color-chip-platform-text: #e65100;
  --color-social-proof: #6b7280;

  /* Typography */
  --font-sans: "GmarketSans", "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;

  /* Spacing */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radius/shadow */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Layout */
  --grid-cols-mobile: 2;
  --grid-cols-tablet: 3;
  --grid-cols-desktop: 4;
  --layout-max-width: 80rem;
  --layout-gutter: var(--space-3);
  --header-height: 3rem;
  --safe-bottom: env(safe-area-inset-bottom, 0);

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Motion/z-index */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;

  --z-sticky: 10;
  --z-badge: 20;
  --z-header: 1000;
  --z-modal: 2000;
}

body.search-active #categoryTabsWrapper {
  display: none;
}

body.search-active #bottomNav {
  display: none;
}