/* =========================================================================
 * tokens.css — 디자인 토큰. 정본은 docs/spec/nextstep/DESIGN-SYSTEM.md §1.
 *
 * 2026-08-12 재디자인 ②: **구글 스티치 "주차별 안내" 화면의 팔레트를 이식**.
 *   사용자가 그 화면을 보고 "엄청 마음에 든다"고 해서 기준으로 삼았다.
 *   스티치는 머티리얼3 계열 토큰을 내주는데, 우리 토큰 이름에 맞춰 옮겼다.
 *   전보다 **살구빛으로 따뜻해지고**, 카드가 그림자 대신 **경계선으로만** 구분된다.
 *
 * ⚠️ 그대로 베끼지 않은 것(실측 근거):
 *   - 스티치는 밝은 코랄 #E2725B 를 아이콘·강조에 두루 쓴다. 그런데 배경 대비 **2.94:1** 이라
 *     그 색으로 글자를 쓰면 AA 미달이다 → **--accent(면·아이콘 전용)** 로 가두고,
 *     글자·버튼에는 진한 #9F402D(대비 6.16, 흰 글자 6.47)를 쓴다.
 *   - 본문 letter-spacing 1.4px 은 한글에 과해 자간이 성겨 보인다 → 안 옮겼다.
 *   - Tailwind CDN·구글폰트 CDN·머티리얼 아이콘 폰트는 **안 쓴다**(자체호스팅 원칙).
 *
 * ⚠️ 유지되는 안전 규칙(바꾸지 말 것):
 *   - --danger 는 파괴적 동작 전용. 건강·미기록 표시에 안 쓴다.
 *   - 추모(memorial)는 무채색 — 코랄 제거.
 *   - 대비 수치는 실측값(docs/qa/nextstep.md).
 * ========================================================================= */

:root {
  /* 표면 — 살구빛 크림(스티치 background/surface 계열) */
  --bg:        #FFF8F5;   /* 화면 바탕 */
  --surface:   #FBF2ED;   /* 카드 — 바탕보다 살짝 진한 면(그림자 대신 이걸로 구분) */
  --surface-2: #F5ECE7;   /* 조용한 블록(기록 없음·면책·비활성) */
  --line:      #DDC0BA;   /* 경계 1px (스티치 outline-variant) */

  /* 글자 */
  --ink:   #1E1B18;       /* 본문 (bg 대비 16.3:1) */
  --ink-2: #56423E;       /* 보조 (8.9:1) — 따뜻한 브라운 */
  --ink-3: #7E6763;       /* 비활성. ⚠️ 스티치 원본 #89726D 은 12px 글자에서 4.26:1 로
                             AA 미달이라(실측) 한 단계 어둡게 내렸다 → 4.99:1 */

  /* 브랜드 */
  --primary:   #9F402D;   /* 제목·버튼·링크. 배경 6.16 · 흰글자 6.47 — 글자에 쓸 수 있는 쪽 */
  --primary-d: #802918;   /* hover/press (스티치 on-primary-fixed-variant) */
  --primary-l: #FFDAD3;   /* 선택 배경·연한 강조 (primary-fixed) */
  --accent:    #E2725B;   /* ⚠️ 면·아이콘·진행바 전용 — 배경 대비 2.94 라 글자 금지 */
  --accent-l:  #FFEDE9;

  /* 의미 */
  --info:   #655D51;      /* 스티치 secondary — 차분한 카키브라운 */
  --info-l: #ECE1D2;
  --danger: #BA1A1A;      /* 파괴적 동작 전용 */
  /* 성공/완료색 없음 — --primary 재사용 */

  /* 치수 — Earth and Cradle 명세 그대로 */
  --radius:   8px;        /* 버튼·입력 (0.5rem) */
  --radius-l: 24px;       /* 카드·큰 컨테이너 (1.5rem) — "감싸 안은" 느낌 */
  --tap: 48px;
  --gap:      24px;       /* gutter · 모바일 좌우 여백 */
  --stack:    32px;       /* stack-md */
  --stack-lg: 64px;       /* 큰 섹션 사이 — 눈이 쉬도록 넓게 */
  /* ⚠️ 카드에 그림자를 쓰지 않는다(명세 §Elevation) — 깊이는 '색조 차이 + 옅은 경계'로 만든다.
     아래 값은 떠 있는 요소(탭바 등)에만 쓰는 아주 흐린 주변광이다. */
  --shadow: 0 4px 20px rgba(45,41,38,.05);
  --hi: rgba(255,255,255,.5);

  /* 헤딩 세리프 — 영문·숫자에만(한글은 산세리프로 떨어진다. Literata 도 한글이 없다) */
  --serif: "Literata", "Georgia", "Times New Roman", serif;
  --sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* 모션 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  200ms;
  --dur-in: 420ms;
}

/* 다크 — ⚠️ 2026-08-12 사용자 지시: **OS 자동 전환은 하지 않는다.**
   "다크모드는 선택일 뿐" — 기본은 항상 밝게이고, 설정에서 직접 고를 때만 어두워진다.
   그래서 @media (prefers-color-scheme: dark) 블록을 뺐다(되돌리려면 이 아래 값을 그대로 쓰면 된다). */
:root[data-theme="dark"] {
  --bg: #1E1B18;  --surface: #2A2521;  --surface-2: #34302C;  --line: #4A403C;
  --ink: #F8EFEA; --ink-2: #D8C6C0;    --ink-3: #A08D87;
  --primary: #FFB4A5; --primary-d: #FFD0C6; --primary-l: #5A0D02;
  --accent: #E2725B;  --accent-l: #3E2019;
  --info: #CAC6BE;    --info-l: #2D2B26;
  --danger: #FFB4AB;
  --shadow: 0 1px 2px rgba(0,0,0,.25);
  --hi: rgba(255,255,255,.04);
}

/* 추모(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;
  --hi: transparent;
}
.memorial * { animation: none !important; transition: none !important; }