/* tokens.css — WELATI 디자인 토큰
 *
 * 출처: docs/design-system.md
 * 이 파일은 CSS 커스텀 프로퍼티(디자인 토큰) 정의만 포함한다.
 * font-weight / letter-spacing / semantic alias는 미확정으로 포함하지 않는다.
 * font-family는 2026-08-26 확정 → 아래 Typography — Font Family 섹션 참고.
 */

:root {

  /* =========================================
     Color — WELATI Palette
     design-system.md §1.1
     ========================================= */

  --color-welati-00: #f8f7f4;
  --color-welati-10: #efebe4;
  --color-welati-20: #dcd2c4;
  --color-welati-30: #c9baa4;
  --color-welati-40: #b6a284;
  --color-welati-50: #a38a64;
  --color-welati-60: #85704f;
  --color-welati-70: #65553c;
  --color-welati-80: #453a29;
  --color-welati-90: #251f16;

  --color-welati-red:  #c7512c;
  --color-welati-sand: #968362;
  --color-welati-moca: #85796E;

  /* =========================================
     Color — Stone Gray
     design-system.md §1.2
     ========================================= */

  --color-stone-100: #f5f5f4;
  --color-stone-200: #e7e5e4;
  --color-stone-300: #d6d3d1;
  --color-stone-400: #a8a29e;
  --color-stone-500: #78716c;
  --color-stone-600: #57534e;
  --color-stone-700: #44403c;
  --color-stone-800: #292524;
  --color-stone-900: #1c1917;

  --color-black: #000000;
  --color-white: #ffffff;

  /* =========================================
     Color — Opacity / White
     design-system.md §1.3
     ========================================= */

  --color-white-10: rgb(255 255 255 / 10%);
  --color-white-30: rgb(255 255 255 / 30%);
  --color-white-50: rgb(255 255 255 / 50%);
  --color-white-70: rgb(255 255 255 / 70%);
  --color-white-90: rgb(255 255 255 / 90%);

  /* =========================================
     Color — Opacity / Black
     design-system.md §1.3
     Note: black-90의 RGB 원본은 #171717 (23 23 23).
           소스 토큰의 naming 불일치 노트 참고.
     ========================================= */

  --color-black-10: rgb(0 0 0 / 10%);
  --color-black-30: rgb(0 0 0 / 30%);
  --color-black-50: rgb(0 0 0 / 50%);
  --color-black-70: rgb(0 0 0 / 70%);
  --color-black-90: rgb(23 23 23 / 90%);

  /* =========================================
     Color — SNS
     design-system.md §1.4
     ========================================= */

  --color-sns-naver: #00c855;
  --color-sns-kakao: #f9be00;

  /* =========================================
     Spacing — Base Scale
     design-system.md §3.1
     ========================================= */

  --space-2xs:  4px;
  --space-xs:   8px;
  --space-s:   16px;
  --space-ms:  20px;
  --space-m:   24px;
  --space-ml:  32px;
  --space-lm:  40px;
  --space-l:   48px;
  --space-xl:  56px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --space-5xl: 120px;
  --space-6xl: 140px;

  /* =========================================
     Spacing — Layout Padding Scale
     design-system.md §3.2
     ========================================= */

  --layout-padding-2xs:  4px;
  --layout-padding-xs:   8px;
  --layout-padding-sm:  16px;
  --layout-padding-md:  24px;
  --layout-padding-lg:  32px;
  --layout-padding-xl:  40px;
  --layout-padding-2xl: 48px;
  --layout-padding-3xl: 64px;
  --layout-padding-4xl: 80px;

  /* =========================================
     Radius
     design-system.md §4
     ========================================= */

  --radius-none: 0;
  --radius-2xs:  4px;
  --radius-xs:   8px;
  --radius-s:   16px;
  --radius-ms:  20px;
  --radius-m:   24px;
  --radius-l:   40px;
  --radius-xl:  48px;
  --radius-2xl: 64px;
  --radius-3xl: 80px;
  --radius-full: 9999px;

  /* =========================================
     Stroke Width
     design-system.md §5
     ========================================= */

  --width-1: 1px;
  --width-2: 2px;
  --width-4: 4px;

  /* =========================================
     Typography — Korean (size + line-height only)
     font-weight / letter-spacing 미확정 → 미포함
     font-family → 아래 Typography — Font Family 섹션 참고
     design-system.md §2.1, §10.4
     ========================================= */

  --fs-kr-h1:       40px;
  --lh-kr-h1:       1.5;

  --fs-kr-h2:       32px;
  --lh-kr-h2:       1.5;

  --fs-kr-h2-point: 20px;
  --lh-kr-h2-point: 1.5;

  --fs-kr-h3:       22px;
  --lh-kr-h3:       1.5;

  --fs-kr-h4:       20px;
  --lh-kr-h4:       1.5;

  --fs-kr-body-1:   17px;
  --lh-kr-body-1:   1.65;

  --fs-kr-body-2:   16px;
  --lh-kr-body-2:   1.6;

  --fs-kr-label:    14px;
  --lh-kr-label:    1.5;

  --fs-kr-chip:     12px;
  --lh-kr-chip:     1.4;

  /* =========================================
     Typography — English (size + line-height only)
     font-weight / letter-spacing 미확정 → 미포함
     font-family → 아래 Typography — Font Family 섹션 참고
     design-system.md §2.2, §10.4
     ========================================= */

  --fs-en-t1:     84px;
  --lh-en-t1:     1.3;

  --fs-en-t2:     72px;
  --lh-en-t2:     1.3;

  --fs-en-t3:     64px;
  --lh-en-t3:     1;

  --fs-en-h1:     36px;
  --lh-en-h1:     1.3;

  --fs-en-h2:     24px;
  --lh-en-h2:     1.3;

  --fs-en-body-2: 16px;
  --lh-en-body-2: 1.3;

  --fs-en-label:  12px;
  --lh-en-label:  1.4;

  /* =========================================
     Typography — Font Family
     design-system.md §2.4
     확정 (2026-08-26): KR Sans / KR Serif / EN Serif
     font-weight / letter-spacing / style별 weight 매핑은 미확정
     ========================================= */

  --font-kr-sans:  'Kakao Big Sans', sans-serif;
  --font-kr-serif: 'GyeonggiBatang', serif;
  --font-en-serif: 'Marcellus', serif;

}