/* ==========================================================================
   DealPick - Design Tokens & Variables
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #F47B20;
  --color-primary-hover: #DF6812;
  --color-primary-soft: #FFF2E8;

  /* Neutral Colors */
  --color-text: #171717;
  --color-text-secondary: #666666;
  --color-text-muted: #929292;
  --color-background: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-border: #EAEAEA;
  --color-border-hover: #D0D0D0;

  /* State Colors */
  --color-danger: #D93025;
  --color-success: #18864B;
  --color-warning: #B7791F;

  /* Typography */
  --font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Dimensions & Spacing */
  --content-max-width: 1200px;
  --header-height-desktop: 72px;
  --header-height-mobile: 56px;
  --bottom-nav-height: 60px;

  /* Spacing Tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
}