/* =========================================================================
 * tokens.css — 디자인 토큰. 정본은 docs/spec/nextstep/DESIGN-SYSTEM.md §1.
 *
 * 2026-08-11 재디자인: Claude(Anthropic) 디자인 언어 적용(사용자 지시).
 *   따뜻한 크림 배경 · 테라코타/코랄 액센트 · 넉넉한 여백 · 부드러운 곡률.
 *   넥스트 스텝 요건("따뜻하게·성별중립·설렘은 여백과 타이포로")과 그대로 맞는다.
 *
 * ⚠️ 유지되는 안전 규칙(바꾸지 말 것):
 *   - --danger 는 파괴적 동작 전용. 건강·미기록 표시에 안 쓴다.
 *   - 추모(memorial)는 무채색 — 코랄 제거.
 *   - 대비 수치는 계산값. 공개 전 Playwright 실측(docs/qa/nextstep.md).
 * ========================================================================= */

:root {
  /* 표면 — 따뜻한 크림 계열(Claude 시그니처 배경) */
  --bg:        #F5F3EC;   /* 메인 크림. 순백 아님 */
  --surface:   #FEFDFB;   /* 카드 — 크림 위 살짝 밝은 아이보리 */
  --surface-2: #EDEAE0;   /* 조용한 블록(기록 없음·면책·비활성) */
  --line:      #E3DFD3;   /* 경계 1px */

  /* 글자 — 따뜻한 다크(순검정 대신 브라운블랙) */
  --ink:   #23201B;       /* 본문 (bg 대비 ≈14:1) */
  --ink-2: #6B6558;       /* 보조 (≈5.7:1) */
  --ink-3: #7D766A;       /* 비활성 (카드 순백 대비도 ≈4.0:1) — 실측 후 조정 2026-08-11 */

  /* 브랜드 — 테라코타(Claude 코랄). 따뜻·성별중립 */
  --primary:   #BB5A38;   /* 흰 글자 대비 ≈4.6:1 (액션 버튼용 하한) */
  --primary-d: #9E4A2C;   /* hover/press */
  --primary-l: #F3E4DC;   /* 선택 배경·연한 강조 */
  --accent:    #D97757;   /* Claude 시그니처 코랄 — ⚠️면·아이콘·주차막대만(텍스트 대비 부족) */
  --accent-l:  #FBEDE6;

  /* 의미 */
  --info:   #3F6B96;
  --info-l: #E9F0F7;
  --danger: #B23B30;      /* 파괴적 동작 전용 */
  /* 성공/완료색 없음 — --primary 재사용 */

  /* 치수 — 부드럽게 */
  --radius:   14px;       /* Claude 특유의 넉넉한 곡률 */
  --radius-l: 20px;
  --tap: 48px;
  --shadow: 0 1px 2px rgba(35,32,27,.04), 0 4px 16px rgba(35,32,27,.05);  /* 절제된 부드러운 그림자 */

  /* 헤딩 세리프 — 영문·브랜드에만. 한글은 산세리프 유지(명조는 육아앱에 딱딱) */
  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* 다크 — claude.ai 다크(따뜻한 차콜) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #262421;  --surface: #302D29;  --surface-2: #3A3631;  --line: #423E38;
    --ink: #F3F0E9; --ink-2: #B5AE9F;    --ink-3: #857E70;
    --primary: #E08760; --primary-d: #EC9878; --primary-l: #3A2C25;
    --accent: #D97757;  --accent-l: #382A23;
    --info: #7FA6CE;    --info-l: #24313F;
    --danger: #D77067;
    --shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"] {
  --bg: #262421;  --surface: #302D29;  --surface-2: #3A3631;  --line: #423E38;
  --ink: #F3F0E9; --ink-2: #B5AE9F;    --ink-3: #857E70;
  --primary: #E08760; --primary-d: #EC9878; --primary-l: #3A2C25;
  --accent: #D97757;  --accent-l: #382A23;
  --info: #7FA6CE;    --info-l: #24313F;
  --danger: #D77067;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.28);
}

/* 추모(memorial) — 무채색. 코랄 제거, 그림자·모션 0 */
.memorial {
  --bg: #F4F4F5; --surface: #FAFAFB; --surface-2: #F0F0F2; --line: #E4E4E7;
  --ink: #3B4048; --ink-2: #5A6470; --ink-3: #8A9099;
  --primary: #5A6470;  --primary-d: #4A5560; --primary-l: #EDEEF0;
  --accent: #5A6470;   --accent-l: #F0F0F2;
  --shadow: none;
}
.memorial * { animation: none !important; transition: none !important; }