/* =========================================================================
 * 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-18 사장님 지시로 OS 자동 전환을 되살렸다**("밝기 관리에서 시스템을 기본으로
      하고 선택할 수 있게해주면 좋을듯"). 2026-08-12 엔 정반대로 뺐었다 — 그때 기준은
      "다크모드는 선택일 뿐"이었다. 뒤집힌 결정이니 **양쪽 사연을 다 남긴다**(안 그러면
      다음 사람이 "왜 또 넣었지" 하고 도로 뺀다).
   ⚠️ 아래 `:root[data-theme="dark"]` 와 media 블록이 **같은 값을 두 벌 갖는다.**
      한쪽만 고치면 "시스템"으로 둔 사람과 "어둡게"로 고른 사람의 화면이 갈라진다. */
: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);
}

/* ⚠️ `:not([data-theme="light"])` 로 감싼다 — 사장님이 **직접 "밝게"를 고른** 경우엔
   OS 가 어두워도 밝아야 한다. media 만 쓰면 그 선택이 OS 에 짓밟힌다.
   ⚠️ "시스템"은 `data-theme` 속성이 **아예 없는** 상태다(app.js 가 지운다). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --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; }