/* cp-auth 서버 템플릿용 디자인 토큰.
   정본은 frontend/src/app/globals.css · tailwind.config.ts — 값을 바꾸면 둘 다 바꾼다.
   (1층 --p-*, 2층 --c-*, --shadow-* 는 globals.css :root 와 같은 값. 채널 값 "46 91 255" 는 rgb(var(--c-primary)) 로 쓴다.)
   설명: docs/claude/design-system.md */
:root {
  /* 1층 — Primitive */
  --p-ink-950: 11 14 17; /* 스페이스 블랙 */
  --p-ink-900: 18 24 32;
  --p-ink-800: 26 35 50;
  --p-ink-700: 30 42 58;
  --p-zinc-50: 250 250 250;
  --p-zinc-400: 161 161 170;
  --p-zinc-450: 138 138 148;
  --p-zinc-500: 113 113 122;
  --p-zinc-600: 82 82 91;
  --p-cobalt-500: 46 91 255;
  --p-cobalt-400: 91 141 239;
  --p-red-400: 248 113 113;
  --p-red-500: 239 68 68;
  --p-green-400: 74 222 128;
  --p-green-500: 34 197 94;
  --p-amber-400: 251 191 36;
  --p-amber-500: 245 158 11;
  --p-blue-400: 96 165 250;
  --p-blue-500: 59 130 246;
  --p-orange-400: 251 146 60;
  --p-orange-500: 249 115 22;
  --p-purple-400: 192 132 252;
  --p-purple-500: 168 85 247;

  /* 2층 — Semantic: 면 */
  --c-background: var(--p-ink-950);
  --c-surface: var(--p-ink-900);
  --c-surface-raised: var(--p-ink-800);
  --c-surface-elevated: var(--p-ink-700);
  --c-fill: rgb(255 255 255 / 0.05);
  --c-fill-strong: rgb(255 255 255 / 0.1);
  --c-scrim: rgb(0 0 0 / 0.6);
  --c-inset: rgb(0 0 0 / 0.25);
  --c-inverse: 255 255 255;
  --c-on-inverse: var(--p-ink-950);

  /* 글자 */
  --c-fg: var(--p-zinc-50);
  --c-fg-secondary: var(--p-zinc-400);
  --c-fg-tertiary: var(--p-zinc-450);
  --c-fg-muted: var(--p-zinc-500);
  --c-fg-disabled: var(--p-zinc-600);

  /* 선 */
  --c-line-subtle: rgb(255 255 255 / 0.06);
  --c-line: rgb(255 255 255 / 0.1);
  --c-line-strong: rgb(255 255 255 / 0.15);

  /* 브랜드 */
  --c-primary: var(--p-cobalt-500);
  --c-primary-soft: var(--p-cobalt-400);
  --c-primary-subtle: rgb(var(--p-cobalt-500) / 0.12);
  --c-primary-muted: rgb(var(--p-cobalt-500) / 0.06);
  --c-on-primary: 255 255 255;

  /* 상태(글자 400 · 꽉 찬 면 500 · 옅은 배경 10% · 진한 배경 20% · 테두리 25%) */
  --c-danger: rgb(var(--p-red-400));
  --c-danger-strong: var(--p-red-500);
  --c-danger-subtle: rgb(var(--p-red-500) / 0.1);
  --c-danger-muted: rgb(var(--p-red-500) / 0.2);
  --c-danger-line: rgb(var(--p-red-500) / 0.25);
  --c-success: rgb(var(--p-green-400));
  --c-success-strong: var(--p-green-500);
  --c-success-subtle: rgb(var(--p-green-500) / 0.1);
  --c-success-muted: rgb(var(--p-green-500) / 0.2);
  --c-success-line: rgb(var(--p-green-500) / 0.25);
  --c-warning: rgb(var(--p-amber-400));
  --c-warning-strong: var(--p-amber-500);
  --c-warning-subtle: rgb(var(--p-amber-500) / 0.1);
  --c-warning-muted: rgb(var(--p-amber-500) / 0.2);
  --c-warning-line: rgb(var(--p-amber-500) / 0.25);
  --c-info: rgb(var(--p-blue-400));
  --c-info-strong: var(--p-blue-500);
  --c-info-subtle: rgb(var(--p-blue-500) / 0.1);
  --c-info-muted: rgb(var(--p-blue-500) / 0.2);
  --c-info-line: rgb(var(--p-blue-500) / 0.25);
  --c-notify: rgb(var(--p-orange-400));
  --c-notify-strong: var(--p-orange-500);
  --c-notify-subtle: rgb(var(--p-orange-500) / 0.1);
  --c-notify-muted: rgb(var(--p-orange-500) / 0.2);
  --c-notify-line: rgb(var(--p-orange-500) / 0.25);
  --c-highlight: rgb(var(--p-purple-400));
  --c-highlight-strong: var(--p-purple-500);
  --c-highlight-subtle: rgb(var(--p-purple-500) / 0.1);
  --c-highlight-muted: rgb(var(--p-purple-500) / 0.2);
  --c-highlight-line: rgb(var(--p-purple-500) / 0.25);

  /* 외부 브랜드(카카오·구글 로그인 가이드 색) · 코드 예시 구문 색 */
  --c-kakao: #fee500;
  --c-kakao-fg: rgb(0 0 0 / 0.85);
  --c-google: #4285f4;
  --c-kakao-hover: #ffe812; /* 카카오 버튼 호버 — 가이드의 노란 계열을 살짝 밝게(카카오 색은 외부 브랜드라 역할 변수로 둔다) */
  --c-code-comment: #6b7a99;
  --c-code-keyword: #7b93db;
  --c-code-string: #a3c9a8;

  /* 그림자 3단계 — 바탕색(잉크) 쪽으로 물들인 그림자 */
  --shadow-sm: 0 1px 2px rgb(5 8 20 / 0.4);
  --shadow-md: 0 8px 24px -8px rgb(5 8 20 / 0.6);
  --shadow-lg: 0 24px 60px -20px rgb(5 8 20 / 0.85);
  /* 템플릿 전용 상태 표현 — 입력칸은 카드보다 파여 보이게(inset), 포커스는 면 둘레에 옅은 코발트 링.
     frontend 는 Tailwind ring/inset 으로 같은 모양을 내므로 globals.css 에는 없다. 서버 템플릿이 값을 한 곳에서 쓰려고 둔다. */
  --shadow-inset: inset 0 2px 4px var(--c-inset);
  --focus-ring: 0 0 0 3px var(--c-primary-subtle);

  /* 템플릿용 단계 변수 — 글자(크기, 줄 높이) */
  --text-display: 36px;
  --text-display-lh: 44px;
  --text-title-xl: 30px;
  --text-title-xl-lh: 38px;
  --text-title-lg: 24px;
  --text-title-lg-lh: 32px;
  --text-title: 20px;
  --text-title-lh: 28px;
  --text-title-sm: 18px;
  --text-title-sm-lh: 26px;
  --text-body-lg: 16px;
  --text-body-lg-lh: 26px;
  --text-body: 14px;
  --text-body-lh: 22px;
  --text-caption: 12px;
  --text-caption-lh: 18px;
  --text-micro: 11px;
  --text-micro-lh: 16px;

  /* 간격 */
  --space-0_5: 2px;
  --space-1: 4px;
  --space-1_5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* 모서리 */
  --radius-tag: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-frame: 24px;
  --radius-full: 9999px;
}