/* ============================================================
   HelloWeb — Design Tokens  (DESIGN-GUIDE.md 기준)
   모든 CSS 파일은 이 파일의 변수를 우선 참조할 것
   ============================================================ */

:root {
  /* ── Brand ── */
  --color-brand:     #004780;
  --color-highlight: #EBAF3B;
  --color-coral:     #EB6439;
  --color-teal:      #247574;
  --color-danger:    #DD1A27;

  /* ── Surface ── */
  --color-bg:        #F7F2EA;
  --color-surface:   #FFFFFF;
  --color-line:      #E5DFD5;

  /* ── Text ── */
  --color-ink:       #1F2937;
  --color-muted:     #6B7280;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* ── Border Radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ── Shadow ── */
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);
  --shadow-pop:  0 8px 32px rgba(0,0,0,.20);

  /* ── Typography ── */
  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;

  /* ── legacy 별칭 (기존 코드 호환) ── */
  --bg:        var(--color-bg);
  --card:      var(--color-surface);
  --ink:       var(--color-ink);
  --muted:     var(--color-muted);
  --brand:     var(--color-brand);
  --accent:    var(--color-brand);
  --highlight: var(--color-highlight);
}

/* ── 텍스트 요소에만 Pretendard 적용 (아이콘 <i> 태그는 건드리지 않음) ── */
html {
  font-family: var(--font-sans);
}

body, p, h1, h2, h3, h4, h5, h6,
span, div, a, li, ul, ol,
td, th, caption,
input, textarea, select, button, label,
figcaption, blockquote, cite, address,
nav, header, footer, main, section, article, aside {
  font-family: var(--font-sans) !important;
}