/* =============================================================================
   GODWEBS GROW - 디자인 토큰
   -----------------------------------------------------------------------------
   godwebs.com 본사 홈페이지에서 실제 사용 중인 토큰을 그대로 상속한다.
   브랜드 정체성 통일이 목적이므로 이 파일의 값은 임의로 바꾸지 않는다.
   ============================================================================= */

:root {
  /* --- 브랜드 민트 --------------------------------------------------------- */
  --mint:       #2BBCAD;
  --mint-600:   #23A497;
  --mint-700:   #1B8478;
  --mint-100:   #D3F0EC;
  --mint-050:   #EAF8F6;

  /* --- 잉크(다크) --------------------------------------------------------- */
  --ink:        #101619;
  --ink-700:    #243030;
  --ink-800:    #18211F;

  /* --- 그레이 스케일 ------------------------------------------------------- */
  --g-050:      #F7F8F9;
  --g-100:      #F1F3F4;
  --g-150:      #ECEEEF;
  --g-200:      #E3E6E7;
  --g-300:      #D0D3D4;
  --g-400:      #9BA29E;
  --g-500:      #727B78;
  --g-600:      #55605D;
  --g-700:      #3A4442;
  --g-900:      #161C1B;

  /* --- 표면 / 배경 --------------------------------------------------------- */
  --bg:         #FFFFFF;
  --bg-soft:    #F4F6F7;
  --surface:    #FFFFFF;
  --line:       var(--g-200);
  --line-strong:var(--g-300);
  --line-dark:  rgba(255,255,255,.14);

  /* --- 상태 컬러 ----------------------------------------------------------- */
  --ok:         #059669;
  --warn:       #D97706;
  --danger:     #DC2626;
  --info:       #2563EB;

  /* --- 타이포 -------------------------------------------------------------- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "Pretendard Variable", Pretendard, "Helvetica Neue", Arial, sans-serif;

  /* --- 레이아웃 ------------------------------------------------------------ */
  --header-h:   64px;
  --sidebar-w:  248px;
  --container:  1320px;
  --gutter:     clamp(16px, 3vw, 32px);

  /* --- 모서리 -------------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* --- 그림자 (최소한으로) -------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(16,22,25,.05);
  --sh-2: 0 2px 8px rgba(16,22,25,.07);
  --sh-3: 0 8px 24px rgba(16,22,25,.10);

  /* --- 간격 ---------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- 모션 ---------------------------------------------------------------- */
  --dur:  .24s;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* --- z-index ------------------------------------------------------------- */
  --z-sidebar: 90;
  --z-header:  100;
  --z-drawer:  120;
  --z-modal:   200;
  --z-toast:   300;
}

/* 모션 최소화 선호 사용자 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}