/*
 * TekCheck Design System
 * P0: Color palette, Badge system, Spacing
 */

/* ── Design Tokens ── */
:root {
  /* Primary: 딥 네이비 (신뢰, 전문) */
  --tc-primary: #1e293b;       /* slate-800 */
  --tc-primary-light: #334155; /* slate-700 */

  /* Accent: 가격/CTA */
  --tc-accent: #2563eb;        /* blue-600 */
  --tc-accent-light: #dbeafe;  /* blue-100 */
  --tc-accent-dark: #1d4ed8;   /* blue-700 */

  /* Deal: 할인/절약 */
  --tc-deal: #dc2626;          /* red-600 */
  --tc-deal-light: #fef2f2;    /* red-50 */

  /* Drop: 가격 하락 */
  --tc-drop: #059669;          /* emerald-600 */
  --tc-drop-light: #ecfdf5;    /* emerald-50 */

  /* Section spacing */
  --tc-section-y: 2rem;        /* py-8 */
  --tc-section-y-lg: 3rem;     /* py-12 */
  --tc-card-px: 1.25rem;       /* px-5 */
}

/* ── Badge System ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 0.375rem;
  line-height: 1.5;
  white-space: nowrap;
}

.badge-cheapest {
  background-color: var(--tc-accent-light);
  color: var(--tc-accent-dark);
}

.badge-discount {
  background-color: var(--tc-deal-light);
  color: var(--tc-deal);
}

.badge-drop {
  background-color: var(--tc-drop);
  color: white;
}

.badge-official {
  background-color: #f0fdf4;
  color: #15803d;
}

.badge-soldout {
  background-color: #f3f4f6;
  color: #6b7280;
}

/* ── Section Spacing ── */
.section-gap {
  padding-top: var(--tc-section-y);
  padding-bottom: var(--tc-section-y);
}

.section-gap-lg {
  padding-top: var(--tc-section-y-lg);
  padding-bottom: var(--tc-section-y-lg);
}