/* tokens.css — 디자인 토큰
   타입 스케일·간격·모서리: honored.kr 배포 CSS의 테마 변수(아너드 디자인 시스템, 코드 기준). 2026-10-15 추출.
   문법(면 구분·포인트 하나·하단 CTA): 토스. 색은 토스 것을 쓰지 않는다 — 무채색 + 사진.
   가져온 것: 타입 스케일 + 5단계 글자 크기(data-dynamic-typography), 굵기, 행간, 자간,
             4px 간격 단위, 모서리, 중립 의미색(배경·글·테두리·입력·비활성·경고).
   뺀 것: 브랜드 초록(--brand*), 로고, 카테고리 색, 차트 색, 아너드 전용 서체(--font-kyobo 등).
   --brand* 슬롯은 이름만 유지하고 값은 임시. 이름이 정해지면 여기 한 군데만 바꾼다. */

:root {
  /* ── 서체 ── */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600;
  --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900;
  --leading-tight: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625;
  --tracking-tight: -.025em; --tracking-normal: 0em;

  /* ── 타입 스케일 (Medium = 1.0 기준값). 실제 크기는 아래 data-dynamic-typography가 정한다 ── */
  --font-12-Medium: .75rem;   --font-12-Large: .81rem;   --font-12-XLarge: .878rem;  --font-12-XXLarge: .953rem;  --font-12-XXXLarge: 1.035rem;
  --font-14-Medium: .875rem;  --font-14-Large: .945rem;  --font-14-XLarge: 1.024rem; --font-14-XXLarge: 1.111rem; --font-14-XXXLarge: 1.208rem;
  --font-16-Medium: 1rem;     --font-16-Large: 1.08rem;  --font-16-XLarge: 1.17rem;  --font-16-XXLarge: 1.27rem;  --font-16-XXXLarge: 1.38rem;
  --font-18-Medium: 1.125rem; --font-18-Large: 1.215rem; --font-18-XLarge: 1.316rem; --font-18-XXLarge: 1.429rem; --font-18-XXXLarge: 1.553rem;
  --font-20-Medium: 1.25rem;  --font-20-Large: 1.35rem;  --font-20-XLarge: 1.463rem; --font-20-XXLarge: 1.588rem; --font-20-XXXLarge: 1.725rem;
  --font-24-Medium: 1.5rem;   --font-24-Large: 1.62rem;  --font-24-XLarge: 1.755rem; --font-24-XXLarge: 1.905rem; --font-24-XXXLarge: 2.07rem;
  --font-30-Medium: 1.875rem; --font-30-Large: 2.025rem; --font-30-XLarge: 2.194rem; --font-30-XXLarge: 2.381rem; --font-30-XXXLarge: 2.588rem;
  --font-36-Medium: 2.25rem;  --font-36-Large: 2.43rem;  --font-36-XLarge: 2.633rem; --font-36-XXLarge: 2.858rem; --font-36-XXXLarge: 3.105rem;
  --font-40: 2.5rem; --font-48: 3rem;

  /* ── 간격·모서리 (4px 단위) ── */
  --spacing: .25rem;
  --radius: .75rem;         /* 12px: 입력·칩 */
  --radius-2xl: 1rem;       /* 16px: 버튼 */
  --radius-3xl: 1.5rem;     /* 24px: 카드 */
  --radius-4xl: 2rem;

  /* ── 터치 영역 (모바일 전용이라 한 단계 크게) ── */
  --tap-min: calc(var(--spacing) * 11);   /* 44px: 아이콘 버튼 최소 */
  --control-h: calc(var(--spacing) * 14); /* 56px: 토스 기본 버튼. 5060이라 아래에서 글자만 키운다 */
  --control-h-sm: calc(var(--spacing) * 13); /* 52px: 보조 버튼 */

  /* ── 색: 무채색 사다리 하나 + 포인트는 비워둔다 ──
     토스에서 가져온 건 문법(면으로 구분, 포인트 하나, 회색 위계)이지 색이 아니다.
     토스 파랑·토스 회색(푸른 기)은 쓰지 않는다. 우리 회색은 아주 약하게 따뜻한 기.
     사진이 색을 맡고, UI는 무채색 사다리 + 포인트(코랄) 하나. */
  --grey50:#FAFAF8; --grey100:#F3F3F0; --grey200:#E6E6E1; --grey300:#D3D3CD; --grey400:#AFAFA8;
  --grey500:#878780; --grey600:#6A6A63; --grey700:#4D4D47; --grey800:#32322E; --grey900:#1A1A17;
  --red500:#D9453D;

  /* 의미색 */
  --background: #ffffff; --foreground: var(--grey900);
  --text-2: var(--grey700); --text-3: var(--grey500);
  --card: #ffffff; --surface: var(--grey50); --surface-2: var(--grey100);
  --border: var(--grey200); --input: var(--grey100); --ring: var(--grey900);
  --destructive: var(--red500);

  /* ── 포인트: 코랄. 2026-10-15 palette.html 비교에서 고름. 이름이 정해져도 이 색을 기준으로 맞춘다 ── */
  --coral500:#E4573D; --coral600:#C9452D; --coral700:#A4371F;
  --coral50:color-mix(in srgb, var(--coral500) 10%, #fff); --coral100:color-mix(in srgb, var(--coral500) 18%, #fff);
  --brand: var(--coral500); --brand-foreground: #ffffff;
  --brand-light: var(--coral50); --brand-medium: var(--coral600); --brand-dark: var(--coral700); --brand-muted: var(--coral100);

  /* ── 결과 구간: 숫자·라벨에만. 젊음은 포인트, 나머지는 먹색 ── */
  --tone-young: var(--brand); --tone-same: var(--grey900); --tone-ahead: var(--grey900);
}

/* 5단계 글자 크기. 아너드는 Medium이 기본, 이 제품은 모바일 전용이라 Large가 기본(+1~2px). */
:root, [data-dynamic-typography="Large"] {
  --font-12: var(--font-12-Large); --font-14: var(--font-14-Large); --font-16: var(--font-16-Large);
  --font-18: var(--font-18-Large); --font-20: var(--font-20-Large); --font-24: var(--font-24-Large);
  --font-30: var(--font-30-Large); --font-36: var(--font-36-Large);
}
[data-dynamic-typography="Medium"] {
  --font-12: var(--font-12-Medium); --font-14: var(--font-14-Medium); --font-16: var(--font-16-Medium);
  --font-18: var(--font-18-Medium); --font-20: var(--font-20-Medium); --font-24: var(--font-24-Medium);
  --font-30: var(--font-30-Medium); --font-36: var(--font-36-Medium);
}
[data-dynamic-typography="XLarge"] {
  --font-12: var(--font-12-XLarge); --font-14: var(--font-14-XLarge); --font-16: var(--font-16-XLarge);
  --font-18: var(--font-18-XLarge); --font-20: var(--font-20-XLarge); --font-24: var(--font-24-XLarge);
  --font-30: var(--font-30-XLarge); --font-36: var(--font-36-XLarge);
}
[data-dynamic-typography="XXLarge"] {
  --font-12: var(--font-12-XXLarge); --font-14: var(--font-14-XXLarge); --font-16: var(--font-16-XXLarge);
  --font-18: var(--font-18-XXLarge); --font-20: var(--font-20-XXLarge); --font-24: var(--font-24-XXLarge);
  --font-30: var(--font-30-XXLarge); --font-36: var(--font-36-XXLarge);
}
[data-dynamic-typography="XXXLarge"] {
  --font-12: var(--font-12-XXXLarge); --font-14: var(--font-14-XXXLarge); --font-16: var(--font-16-XXXLarge);
  --font-18: var(--font-18-XXXLarge); --font-20: var(--font-20-XXXLarge); --font-24: var(--font-24-XXXLarge);
  --font-30: var(--font-30-XXXLarge); --font-36: var(--font-36-XXXLarge);
}