/* =====================================================================
   Taean Life — Design Tokens
   ---------------------------------------------------------------------
   2단 구조:  ① 원시 팔레트(primitive)  →  ② 의미 토큰(semantic)
   컴포넌트/페이지 CSS 는 반드시 ②(의미 토큰)만 사용한다.
   브랜드: 바다 블루 + 모래(sand)
   ===================================================================== */

:root {
  /* ── ① Primitive palette ─────────────────────────────── */

  /* 바다 블루 */
  --c-blue-50:  #eef4fb;
  --c-blue-100: #d8e7f7;
  --c-blue-200: #aecdef;
  --c-blue-300: #7fb0e4;
  --c-blue-400: #4f90d6;
  --c-blue-500: #2f74bf;   /* primary */
  --c-blue-600: #235c9c;
  --c-blue-700: #1b4778;

  /* 모래(sand) */
  --c-sand-50:  #faf6ee;
  --c-sand-100: #f3ebd8;
  --c-sand-200: #e7d7b5;
  --c-sand-300: #d8bf8c;
  --c-sand-400: #c9a763;   /* accent */
  --c-sand-500: #a9863f;

  /* 중립(gray) */
  --c-gray-50:  #f6f8fb;
  --c-gray-100: #eef1f5;
  --c-gray-200: #e2e7ec;
  --c-gray-300: #cbd3db;
  --c-gray-400: #9aa5b1;
  --c-gray-500: #6b7280;
  --c-gray-700: #374151;
  --c-gray-900: #1a2430;
  --c-white:    #ffffff;

  /* 카테고리 */
  --c-cat-travel: var(--c-blue-500);
  --c-cat-food:   #e07a3f;
  --c-cat-kids:   #2fa36b;

  /* ── ② Semantic tokens ───────────────────────────────── */

  /* 색 */
  --color-primary:        var(--c-blue-500);
  --color-primary-strong: var(--c-blue-600);
  --color-primary-soft:   var(--c-blue-50);
  --color-accent:         var(--c-sand-400);
  --color-accent-soft:    var(--c-sand-50);

  --color-bg:           var(--c-gray-50);
  --color-surface:      var(--c-white);
  --color-surface-alt:  var(--c-gray-100);

  --color-text:         var(--c-gray-900);
  --color-text-soft:    var(--c-gray-500);
  --color-text-inverse: var(--c-white);

  --color-border:       var(--c-gray-200);
  --color-border-strong:var(--c-gray-300);

  --color-cat-travel: var(--c-cat-travel);
  --color-cat-food:   var(--c-cat-food);
  --color-cat-kids:   var(--c-cat-kids);

  /* 타이포 */
  --font-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.0625rem;   /* 17px */
  --fs-lg:   1.2rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.4rem;

  --lh-tight: 1.3;
  --lh-base:  1.8;        /* 한글 본문 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* 간격 (8px 그리드) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 모서리 */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(26, 36, 48, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 36, 48, 0.08);
  --shadow-lg: 0 12px 30px rgba(47, 116, 191, 0.14);

  /* 모션 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.18s;

  /* 레이아웃 */
  --container: 1180px;
  --container-narrow: 860px;
}