/* namok-design tokens (.claude/standards/namok-design/README.md §2~§4 정본)
   전역 디자인 토큰 단일 소스. 공개(user) 페이지 기준 스케일.
   관리자(admin)는 데이터 밀도가 높아 typography/layout 일부를 admin.css 에서 더 작게 재정의한다. */

:root {
  /* === Fonts === */
  --font-display: 'esamanru', 'Noto Sans KR', sans-serif;
  --font-body:    Pretendard, 'Noto Sans KR', sans-serif;

  /* === Primary (Blue theme — Figma: Color/Primary-B) === */
  --color-primary-5:  #eef0fe;
  --color-primary-10: #d4dafd;
  --color-primary-20: #abb9fc;
  --color-primary-30: #869dfb;
  --color-primary-40: #5b81f9;
  --color-primary-50: #2167f4;
  --color-primary-60: #1953c8; /* 브랜드 메인 */
  --color-primary-70: #113f9e;
  --color-primary-80: #0a2e77;
  --color-primary-90: #041b4d;
  --color-primary-95: #020e31; /* 본문 잉크 */

  /* === Gray === */
  --color-gray-0:   #ffffff;
  --color-gray-5:   #f5f6f7;
  --color-gray-10:  #dcdee2;
  --color-gray-20:  #c1c5cf;
  --color-gray-30:  #a6adbb;
  --color-gray-40:  #8b94a8;
  --color-gray-50:  #777f90;
  --color-gray-60:  #626978;
  --color-gray-70:  #4e5460;
  --color-gray-80:  #3a3e48;
  --color-gray-90:  #252930;
  --color-gray-95:  #111318;
  --color-gray-100: #000000;

  /* === Accent === (변수명은 호환 위해 teal-* 유지, 값은 blue 중간값) */
  --color-accent: #5b81f9;
  --teal-tint:    #e2eafe;
  --teal-border:  #b8c5fb;
  --teal-mid:     #cdd6fc;
  --muted-teal:   #5c6da8;

  /* === Status ===
     기존엔 미정의라 var() 폴백(#c00/#e53e3e/#0a7)이 제각각 렌더되던 것을 정식화.
     5=옅은 배경 틴트 / 10=보더·강한 틴트 / 20=보더 / 70=텍스트 (gray·primary 스케일과 동일 규칙) */
  --color-error:   #d32f2f; /* 흰 배경 대비 5.0:1 (AA) — 구 #e53e3e는 4.1:1 미달 */
  --color-error-5:    #fdecec;
  --color-error-10:   #f3b9b9;
  --color-error-70:   #8a1f1f;

  --color-success: #047857; /* 블루 팔레트와 어울리는 한색 딥그린, 흰 배경 대비 5.5:1 (AA) */
  --color-success-5:  #edfaf4;
  --color-success-10: #d4f0e5;
  --color-success-20: #a3d9bd;
  --color-success-70: #1a6643;

  --color-warning-5:  #fffbec;
  --color-warning-10: #f0d98a;
  --color-warning-70: #7a5a00;

  /* === Semantic Aliases === */
  --bg:          var(--color-gray-5);
  --ink:         var(--color-primary-95);
  --muted:       var(--color-gray-60);
  --line:        var(--color-gray-10);
  --white:       var(--color-gray-0);
  --dark:        var(--color-gray-95);
  --footer-text: var(--color-gray-60); /* 푸터 본문 */
  --shadow: 0 12px 28px rgba(17, 20, 24, .08);
  --ring:   0 0 0 3px rgba(33, 103, 244, .35);
  --ring-soft: 0 0 0 3px rgba(25, 83, 200, .12); /* 입력 포커스 글로우(브랜드 블루 틴트) */

  /* === Typography (Display) === */
  --text-display-xl:   64px;
  --text-display-lg:   62px;
  --text-display-md:   56px;
  --text-display-sm:   44px;
  --text-display-xsm:  40px;
  --text-display-xxsm: 32px;

  /* === Typography (Heading) === */
  --text-heading-xl:  60px;
  --text-heading-lg:  50px;
  --text-heading-md:  40px;
  --text-heading-sm:  28px;
  --text-heading-xs:  26px;
  --text-heading-xxs: 22px;

  /* === Typography (Body) === */
  --text-body-lg:    26px;
  --text-body-md:    22px;
  --text-body-sm:    20px;
  --text-body-xs:    18px;
  --text-body-label: 14px;

  /* === Rhythm === */
  --leading-display: 1.2;
  --leading-tight:   1.3;
  --leading-body:    1.5;
  --tracking: -1px;

  /* === Radius === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 99px;

  /* === Spacing (4px grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === Layout === */
  --layout-max:          1280px;
  --layout-pad-x:        7vw;
  --layout-pad-y:        78px;
  --layout-pad-x-mobile: 22px;
  --layout-pad-y-mobile: 52px;
}