@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

/*
 * design-tokens.css
 * 카드뉴스 디자인 토큰 — 색상, 타이포, 간격, 형태
 * 이 파일의 값만 수정하면 전체 카드 디자인이 일관되게 바뀐다.
 */

:root {
  /* ─── 폰트 ─────────────────────────── */
  --font-base: 'Noto Sans KR', -apple-system, sans-serif;

  /* ─── 타이포그래피 스케일 (1080px 캔버스 기준) ─── */
  --fs-tag:        26px;
  --fs-hl-xl:      96px;   /* 카드1 헤드라인 */
  --fs-hl-lg:      88px;   /* 카드2·4·5 헤드라인 */
  --fs-hl-md:      84px;   /* 카드3 헤드라인 */
  --fs-body-lg:    36px;   /* 카드1 본문 */
  --fs-body:       34px;   /* 기본 본문 */
  --fs-body-sm:    32px;
  --fs-body-xs:    30px;
  --fs-card-num:   28px;
  --fs-big-num:   160px;
  --fs-big-lbl:    36px;
  --fs-cta-main:   44px;
  --fs-cta-sub:    28px;
  --fs-cmp-lbl:    26px;
  --fs-cmp-val:    48px;
  --fs-step:       34px;
  --fs-chk:        36px;

  /* ─── 간격 ─────────────────────────── */
  --sp-card-v:    80px;    /* 카드 내부 상하 패딩 */
  --sp-card-h:    72px;    /* 카드 내부 좌우 패딩 */
  --sp-tag-mb:    48px;
  --sp-hl-mb:     44px;
  --sp-div-mb:    44px;
  --sp-gap:       52px;

  /* ─── 형태 ─────────────────────────── */
  --r-tag:  40px;
  --r-box:  16px;
  --r-cta:  20px;

  /* ─── 구분선 ────────────────────────── */
  --div-w: 60px;
  --div-h: 4px;

  /* ══════════════════════════════════
     카드 1 · 블루 — 공감/훅
  ══════════════════════════════════ */
  --c1-bg:     linear-gradient(155deg, #0f172a 0%, #1e3a5f 60%, #0f2942 100%);
  --c1-fg:     #f0f6ff;
  --c1-accent: #4f9cf9;
  --c1-body:   #a8c4e8;
  --c1-tag-bg: rgba(79, 156, 249, 0.18);
  --c1-tag-bd: rgba(79, 156, 249, 0.30);
  --c1-quote:  rgba(79, 156, 249, 0.10);

  /* ══════════════════════════════════
     카드 2 · 퍼플 — 문제제기
  ══════════════════════════════════ */
  --c2-bg:     linear-gradient(155deg, #1a0a2e 0%, #2d1b4e 50%, #1e0f3a 100%);
  --c2-fg:     #f0eaff;
  --c2-accent: #c084fc;
  --c2-body:   #c4aef0;
  --c2-hi:     #f0abfc;
  --c2-tag-bg: rgba(192, 132, 252, 0.15);
  --c2-tag-bd: rgba(192, 132, 252, 0.30);

  /* ══════════════════════════════════
     카드 3 · 그린 — 해결책
  ══════════════════════════════════ */
  --c3-bg:     linear-gradient(155deg, #062018 0%, #0d3d2a 55%, #041e14 100%);
  --c3-fg:     #e8fff4;
  --c3-accent: #34d399;
  --c3-body:   #86efac;
  --c3-list:   #d1fae5;
  --c3-tag-bg: rgba(52, 211, 153, 0.15);
  --c3-tag-bd: rgba(52, 211, 153, 0.30);

  /* ══════════════════════════════════
     카드 4 · 골드 — 증거/사례
  ══════════════════════════════════ */
  --c4-bg:      linear-gradient(155deg, #1a1000 0%, #3d2800 55%, #1a1000 100%);
  --c4-fg:      #fff8e8;
  --c4-accent:  #fbbf24;
  --c4-body:    #fcd89a;
  --c4-label:   #a07830;
  --c4-tag-bg:  rgba(251, 191, 36, 0.15);
  --c4-tag-bd:  rgba(251, 191, 36, 0.30);
  --c4-cmp-bg:  rgba(251, 191, 36, 0.08);
  --c4-cmp-bd:  rgba(251, 191, 36, 0.20);
  --c4-cmp-div: rgba(251, 191, 36, 0.15);

  /* ══════════════════════════════════
     카드 5 · 스카이 — 행동/CTA
  ══════════════════════════════════ */
  --c5-bg:     linear-gradient(155deg, #0a1628 0%, #102040 55%, #0a1628 100%);
  --c5-fg:     #e8f4ff;
  --c5-accent: #38bdf8;
  --c5-body:   #bae6fd;
  --c5-cta-fg: #0a1628;
  --c5-tag-bg: rgba(56, 189, 248, 0.15);
  --c5-tag-bd: rgba(56, 189, 248, 0.30);
}