/* tokens-vars.css — 변수 전용. 전역 element selector 없음 (레이아웃 안전) */
:root {
  /* ── Brand ── 깨끗하고 생기 있는 그린 (구조·타이틀·CTA) */
  --brand:        #188A4A;
  --brand-hover:  #126B3A;
  --brand-press:  #0E5730;
  --brand-weak:   #EAF5EC;   /* sage — 아주 옅은 배경 틴트 */
  --brand-line:   #CCE4D4;   /* 그린 계열 보더 */
  --brand-ink:    #0E5730;   /* 그린 틴트 위 텍스트 */

  /* ── Sage / Mint ── 화면의 20~25%를 담당하는 옅은 그린 배경 */
  --sage-50:      #F3FAF5;   /* mint — 가장 옅은 섹션 배경 */
  --sage-100:     #EAF5EC;   /* sage — 카드/아이콘 컨테이너 */
  --sage-200:     #DDEFE2;   /* soft green — 보더/구분선 */
  --mint-50:      #F3FAF5;
  --mint-100:     #DDEFE2;
  --cream:        #FBFAF5;   /* warm cream */

  /* ── Accent ── 10% 이하. 캐릭터 포인트·작은 상태 표시 전용 */
  --accent:       #188A4A;
  --accent-weak:  #EAF5EC;
  --accent-y:     #F5C842;   /* yellow — 아주 제한적으로만 */
  --accent-y-weak:#FDF4DC;

  /* ── Neutrals ── 화면의 65~70% */
  --n-0:  #FFFFFF;   /* 카드/입력 배경        */
  --n-1:  #FBFAF5;   /* 페이지 배경(warm cream) */
  --n-2:  #F4F5F2;   /* 섹션 대비 배경/트랙   */
  --n-3:  #E3E8E3;   /* hairline border      */
  --n-4:  #CFD6CF;   /* 강한 구분선/비활성    */
  --n-5:  #82897F;   /* muted 텍스트         */
  --n-6:  #515751;   /* 본문 텍스트          */
  --n-7:  #2A2F2B;   /* 차콜 — 부제목        */
  --n-8:  #161A17;   /* 헤딩 잉크            */

  /* ── Semantic ── 채도 낮춤 */
  --danger:       #A34742;   /* 시세 하락 = muted red */
  --danger-weak:  #F7ECEB;
  --danger-line:  #E6CDCB;
  --warn:         #8A6516;
  --warn-weak:    #FDF4DC;
  --warn-line:    #EFDFB4;
  --info:         #2B4C7E;
  --info-weak:    #EBEFF6;
  --info-line:    #CBD6E6;
  --ok:           #188A4A;
  --ok-weak:      #EAF5EC;

  /* ── Radius ── 10~14px 중심. pill 최소화 */
  --r-xs:   4px;
  --r-sm:   8px;   /* 배지·태그·인풋 */
  --r-md:   10px;  /* 버튼·카드 기본 */
  --r-lg:   12px;  /* CTA·큰 카드 */
  --r-xl:   14px;  /* 모달·히어로 미디어 */
  --r-pill: 999px; /* 예외적 사용만 */

  /* ── Shadow ── 아주 약하게 */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(22, 26, 23, 0.03);
  --sh-2: 0 2px 6px rgba(22, 26, 23, 0.05);
  --sh-3: 0 8px 24px rgba(22, 26, 23, 0.07);   /* 모달·드롭다운 한정 */
  --focus: 0 0 0 3px rgba(24, 138, 74, 0.16);

  /* ── Spacing ── 4px 베이스 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  --container: 1280px;
  --container-narrow: 880px;

  /* ── Typography ── */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  /* 스케일 확대 + 단계 간 대비 강화 (1.28 ratio 기반) */
  --fs-micro:    0.75rem;   /* 12px  라벨/각주      */
  --fs-caption:  0.8125rem; /* 13px  캡션/보조      */
  --fs-body-sm:  0.875rem;  /* 14px  조밀한 본문    */
  --fs-body:     0.9375rem; /* 15px  기본 본문      */
  --fs-body-lg:  1.0625rem; /* 17px  리드 문단      */
  --fs-h4:       1.25rem;   /* 20px                */
  --fs-h3:       1.625rem;  /* 26px                */
  --fs-h2:       2.125rem;  /* 34px                */
  --fs-h1:       2.75rem;   /* 44px                */
  --fs-display:  3.75rem;   /* 60px  히어로         */

  --lh-display: 1.08;
  --lh-heading: 1.22;
  --lh-snug:    1.45;
  --lh-body:    1.68;

  --ls-display: -0.032em;
  --ls-heading: -0.021em;
  --ls-body:    -0.006em;
  --ls-caps:     0.09em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* ── Motion ── 느리고 절제 */
  --ease: cubic-bezier(.22,.61,.24,1);
  --dur-fast: 120ms;
  --dur:      200ms;

  /* ── 하위호환 shim (기존 페이지 변수명 → 새 토큰) ── */
  --green: var(--brand);       --green-dark: var(--brand-hover);
  --green-soft: var(--brand-weak);
  --lime: var(--accent);       --yellow: var(--accent-y);
  --paper: var(--n-1);         --ink: var(--n-8);
  --ink-soft: var(--n-5);      --line: var(--n-3);
  --red: var(--danger);        --red-soft: var(--danger-weak);
  --amber-bg: var(--warn-weak); --amber-ink: var(--warn);
  --info-bg: var(--info-weak);
  --radius: var(--r-md);       --radius-s: var(--r-sm);
  --shadow-1: var(--sh-1);     --shadow-2: var(--sh-2); --shadow-3: var(--sh-3);
}