/* 디자인 토큰 — 낮 무대 (2026-08-16 확정)
 *
 * 이 파일 하나가 사이트와 실습의 색·선을 함께 정한다.
 *
 * ── 왜 Teens 의 밤하늘을 안 쓰는가 ─────────────────────────────
 * Teens 는 깊은 남색 바탕이다. 그런데 똘뱅이 팔레트는 **크림 바탕에 인디고
 * 외곽선**인 밝은 그림이라, 어두운 데 얹으면 스티커처럼 뜬다. 화면의 절반을
 * 캐릭터가 차지하는 이 사이트에서는 조건이 다르다.
 *
 * 그리고 똘뱅이 가족 여덟 앱이 이미 이 색이다 — ddolbeng.com 에서 건너온
 * 아이가 같은 세계로 느낀다. 색값은 `ddolbeng/shared/tokens.json` 이 원본이다.
 *
 * 규칙
 *  - 글자와 선은 **캐릭터 외곽선과 같은 인디고**. 그래야 그림과 글이 한 벌로 보인다
 *  - 강조는 leaf(초록) 와 sky(하늘). 여섯 번째 색이 필요하면 디자인이 틀린 것이다
 *  - **큰 단추는 가족 공용 규격**을 따른다 (대비 3.58:1 측정본)
 */

:root {
  color-scheme: light;

  /* ── 바탕과 글자 ─────────────────────────────── */
  --cream:      #FDF2E0;   /* 페이지 바닥 */
  --cream-2:    #FBE3C8;   /* 한 겹 안쪽 */
  --cream-3:    #EDD6B0;
  --paper:      #ffffff;   /* 카드 */

  --ink:        #4E4677;   /* 글자·선. 캐릭터 외곽선과 같은 값 */
  --ink-2:      #6A6199;   /* 보조 설명 */
  --ink-3:      #8A81B8;   /* 캡션 · 비활성 */
  --line:       rgba(78, 70, 119, .22);

  /* ── 강조 다섯 ───────────────────────────────── */
  --leaf:       #5FBB6E;
  --leaf-2:     #469156;
  --sky:        #BEE7F5;
  --berry:      #F2A3C0;
  --yellow:     #F7C85C;
  --orange:     #F58A4B;
  --red:        #EC6A5E;   /* 틀림 · 주의 */

  /* ── 실습 무대 ───────────────────────────────────
   * 대비가 꼭 필요한 실습(소리 파형 같은 것)만 어둡게 쓴다.
   * 기본은 밝다 — Teens 처럼 무대를 통째로 어둡게 두지 않는다. */
  --stage:      #ffffff;
  --stage-deep: #14162a;
  --stage-line: rgba(78, 70, 119, .16);

  /* ── 그림자는 색이 아니라 두께로 ────────────────
   * 가족 앱들이 쓰는 방식. 흐릿한 그림자 대신 **아래로 밀린 단색 판**이라
   * 종이를 오려 붙인 느낌이 나고, 눌렸을 때가 분명하다 */
  --drop-1: 0 3px 0 rgba(78, 70, 119, .30);
  --drop-2: 0 5px 0 rgba(78, 70, 119, .28);
  --drop-3: 0 4px 0 rgba(78, 70, 119, .45);

  /* ── 선 규격 ─────────────────────────────────── */
  /* ── 부(部) 색 셋 ────────────────────────────────
   * 위에 있는 강조색에서 **골라 쓸 뿐** 새 색을 만들지 않습니다.
   *   1부 만들어 줘요   노랑 — 마법이 먼저인 자리
   *   2부 어떻게 만들까  하늘 — 속을 열어 보는 자리
   *   3부 어떻게 쓸까    초록 — 챙겨 나가는 자리
   * 색은 **길잡이이지 뜻이 아닙니다.** 색만 보고 알아야 하는 것은 없습니다 */
  --p1: #F7C85C;  --p1-soft: #FDF0CE;
  --p2: #BEE7F5;  --p2-soft: #E6F5FB;
  --p3: #5FBB6E;  --p3-soft: #DFF1E2;

  --stroke:     3px;        /* 캐릭터 외곽선과 같은 굵기감 */
  --radius:     22px;
  --radius-sm:  16px;
  --radius-pill: 999px;

  /* ── 간격 (4의 배수) ─────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* ── 서체 ────────────────────────────────────────
   * 웹폰트를 불러오지 않는다. 네트워크 요청 0 이 이 사이트의 제약이다. */
  --font: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
          "Noto Sans KR", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 초 3~4 가 읽는다. Teens 보다 크고 줄간격이 넓다 */
  --text:    1.0625rem;
  --text-lg: 1.1875rem;
  --lh:      1.85;
  --measure: 34em;
}

/* 움직임을 줄이도록 설정한 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}