/* ==============================
   variables.css — 디자인 토큰
   ============================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* ── 브랜드 컬러 ── */
  --sage:         #7B9E87;
  --sage-light:   #C8DDD0;
  --sage-bg:      #F2F7F4;
  --sage-dark:    #1F3328;
  --point:        #E8A87C;
  --point-dark:   #D4865A;

  /* ── 그레이 스케일 ── */
  --gray-50:      #F8FAF9;
  --gray-100:     #EEF2F0;
  --gray-200:     #DDE5E1;
  --gray-300:     #C2CFC9;
  --gray-400:     #9AB0A6;
  --gray-500:     #728F84;
  --gray-600:     #556E63;
  --gray-700:     #3E5249;
  --gray-800:     #2A3B33;
  --gray-900:     #1A2620;

  /* ── 의미 컬러 ── */
  --color-success:   #4CAF82;
  --color-warning:   #F0C866;
  --color-error:     #E57373;
  --color-info:      #64B5D9;

  /* ── 텍스트 ── */
  --text-primary:    var(--sage-dark);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-400);
  --text-inverse:    #FFFFFF;
  --text-point:      var(--point-dark);

  /* ── 배경 ── */
  --bg-base:         var(--sage-bg);
  --bg-surface:      #FFFFFF;
  --bg-overlay:      rgba(31, 51, 40, 0.5);

  /* ── 보더 ── */
  --border-light:    var(--gray-200);
  --border-medium:   var(--gray-300);
  --border-dark:     var(--gray-400);
  --border-radius-sm:   6px;
  --border-radius:      12px;
  --border-radius-lg:   20px;
  --border-radius-full: 9999px;

  /* ── 그림자 ── */
  --shadow-xs:  0 1px 3px rgba(31, 51, 40, 0.06);
  --shadow-sm:  0 2px 8px rgba(31, 51, 40, 0.08);
  --shadow-md:  0 4px 16px rgba(31, 51, 40, 0.10);
  --shadow-lg:  0 8px 32px rgba(31, 51, 40, 0.14);
  --shadow-xl:  0 16px 48px rgba(31, 51, 40, 0.18);

  /* ── 타이포그래피 ── */
  --font-base:     'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-display:  'Pretendard', sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ── 스페이싱 ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── 레이아웃 ── */
  --max-width:      480px;   /* 모바일 PWA 최대 너비 */
  --header-height:  56px;
  --bottom-nav-height: 64px;
  --safe-bottom:    env(safe-area-inset-bottom, 0px);

  /* ── 트랜지션 ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── z-index ── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}