/* ============================================================
 * siteinfor.co.kr — Design Tokens
 * Version: 1.0  (2026-05-14)
 * Drop-in import:  @import url('./tokens.css');
 * ============================================================ */

:root {
  /* ---------- Primary ---------- */
  --color-primary-900: #1E3A8A;
  --color-primary-700: #1D4ED8;
  --color-primary-500: #2563EB;  /* MAIN BRAND */
  --color-primary-300: #93C5FD;
  --color-primary-50:  #EFF6FF;

  /* ---------- Accent ---------- */
  --color-accent-yellow:       #FBBF24;
  --color-accent-yellow-light: #FEF3C7;
  --color-accent-yellow-dark:  #D97706;

  /* ---------- Semantic ---------- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;
  --color-info:    #0EA5E9;

  /* ---------- Neutral ---------- */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6B7280;
  --text-disabled:  #9CA3AF;
  --border-default: #E5E7EB;
  --border-strong:  #D1D5DB;
  --bg-white:       #FFFFFF;
  --bg-gray-50:     #F9FAFB;

  /* ---------- Typography ---------- */
  --font-sans: 'Pretendard', 'Noto Sans KR', -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo',
               system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'D2Coding', monospace;

  /* type scale: size / line-height */
  --fs-display:  40px;  --lh-display:  52px;  --fw-display:  800;
  --fs-h1:       32px;  --lh-h1:       44px;  --fw-h1:       700;
  --fs-h2:       24px;  --lh-h2:       34px;  --fw-h2:       700;
  --fs-h3:       20px;  --lh-h3:       30px;  --fw-h3:       600;
  --fs-body-lg:  16px;  --lh-body-lg:  26px;
  --fs-body:     14px;  --lh-body:     22px;
  --fs-caption:  12px;  --lh-caption:  18px;
  --fs-label:    13px;  --lh-label:    20px;  --fw-label:    600;

  /* ---------- Spacing (8px grid) ---------- */
  --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;
  --space-20: 80px;

  /* ---------- Radius ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---------- Shadow ---------- */
  --shadow-sm:    0 1px 2px rgba(17, 24, 39, .05);
  --shadow-md:    0 4px 12px rgba(17, 24, 39, .08);
  --shadow-lg:    0 12px 24px rgba(30, 58, 138, .10);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, .25);

  /* ---------- Breakpoints (for reference, use in JS or media queries) ---------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
 * Base utilities (optional — remove if you have your own reset)
 * ============================================================ */

html { font-family: var(--font-sans); color: var(--text-primary); }
body { background: var(--bg-gray-50); margin: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ============================================================
 * Buttons
 * ============================================================ */

.btn-primary,
.btn-accent,
.btn-outline {
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font: 600 var(--fs-body)/1 var(--font-sans);
  cursor: pointer;
  border: none;
  transition: background .15s, box-shadow .15s, transform .1s;
}

.btn-primary {
  background: var(--color-primary-500);
  color: #FFFFFF;
}
.btn-primary:hover  { background: var(--color-primary-700); }
.btn-primary:active { background: var(--color-primary-900); }
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.btn-primary:disabled { background: var(--color-primary-300); cursor: not-allowed; }

.btn-accent {
  background: var(--color-accent-yellow);
  color: var(--text-primary);
  font-weight: 700;
}
.btn-accent:hover { background: var(--color-warning); }

.btn-outline {
  background: var(--bg-white);
  color: var(--color-primary-500);
  border: 1.5px solid var(--color-primary-500);
}
.btn-outline:hover { background: var(--color-primary-50); }

/* size variants */
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-label); }
.btn-lg { height: 52px; padding: 0 28px; font-size: var(--fs-body-lg); }

/* ============================================================
 * Chips
 * ============================================================ */

.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font: 500 var(--fs-label)/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
}
.chip.is-active {
  background: var(--color-primary-500);
  color: #FFFFFF;
}

/* ============================================================
 * Card
 * ============================================================ */

.card {
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ============================================================
 * Input
 * ============================================================ */

.input {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-default);
  background: var(--bg-white);
  font: 400 var(--fs-body)/1 var(--font-sans);
  color: var(--text-primary);
}
.input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}
.input::placeholder { color: var(--text-disabled); }

/* ============================================================
 * Hub icon card
 * ============================================================ */

.hub-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  text-decoration: none; color: var(--text-primary);
  transition: background .15s, border-color .15s;
}
.hub-card:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}
.hub-card img { width: 64px; height: 64px; }
.hub-card__title { font: 600 var(--fs-body)/1 var(--font-sans); }

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}