/*
 * BATU 앱 디자인 토큰 정본 (_tokens.css)
 * ============================================================
 * 이 파일이 무엇인가
 * ------------------------------------------------------------
 * home.html · med.html · reading.html · community.html ·
 * onboarding.html · settings.html 6개 화면이 각자 <style> 안에
 * 따로 갖고 있던 색·간격·글자크기·모서리 선언을 한 곳에 모은
 * 정본(single source of truth) 파일이다.
 *
 * 아직 어느 화면도 이 파일을 <link>로 불러 쓰지 않는다.
 * 화면에 실제로 연결하는 일은 별도 승인 절차를 거치는 다음
 * 단계이고, 이번 작업 범위가 아니다.
 *
 * 값과 이름의 정본 순서 (어긋날 때 무엇을 믿을지)
 * ------------------------------------------------------------
 * 1순위: 실제 앱 화면 6종의 <style> 안 :root / [data-mode] /
 *        [data-accent] 블록 (grep으로 6화면 전부 직접 대조함)
 * 2순위: docs/batu/디자인토큰_명세_v1.md (간격·글자·모서리
 *        스케일의 이름·값은 이 문서가 유일한 출처라 그대로 씀)
 * 3순위(참고만, 정본 아님): _base.css - 옛 목업 카탈로그 3개만
 *        쓰는 파일이라 실제 앱과 값이 어긋나 있다.
 *
 * ⚠️ 아래에 적어둔 것처럼, 명세서 0-1절 표(베이스 색)의 light·dark
 * 두 칸은 실제로 grep해보니 "실제 앱"이 아니라 "_base.css" 값과
 * 일치했다(명세서 집필 시 착오로 보인다). 이 파일은 실제 앱
 * 6화면을 직접 grep한 값을 썼다 - 아래 "베이스 색 출처 메모" 참고.
 *
 * 서체·간격·글자크기·모서리는 실제 앱과 명세서가 전부 일치해서
 * 어느 쪽을 정본 삼아도 값이 같다.
 * ============================================================
 */

:root {
  /* --------------------------------------------------------
   * 서체
   * 6화면 <style> 전수 대조 결과 --serif/--sans 전부 동일값.
   * 출처: home.html:15-16, med.html:18-19 (외 4화면도 동일 문구)
   * 로고 워드마크만 인라인 style로 'Mulish', sans-serif를 쓴다
   * (예: home.html:191 <span style="font-family:'Mulish',...">).
   * 별도 CSS 변수로 만들지 않았다 - 인라인 예외 1곳뿐이라 스케일에
   * 넣을 근거가 약하고, 명세서에도 토큰화 지시가 없다.
   * -------------------------------------------------------- */
  --serif: "Pretendard", -apple-system, system-ui, sans-serif;
  --sans: "Pretendard", -apple-system, system-ui, sans-serif;

  /* --------------------------------------------------------
   * 간격 스케일 - 11단계 (sp-11은 명세서에서 의도적으로 비움)
   * 출처: 디자인토큰_명세_v1.md 1절(관측 947건 집계 결과, 2026-08-03
   * SWAN 결정으로 sp-9·sp-10·sp-12 신설 포함). 코드에는 원래 이름이
   * 없었으므로(값만 흩어져 있었음) 이 이름·값은 명세서가 유일 출처.
   * -------------------------------------------------------- */
  --sp-1: 4px;   /* 아이콘 미세 간격 - 예: .swan-tools{gap:4px}(med/reading) */
  --sp-2: 8px;   /* 버튼·아이콘·리스트 기본 간격 - 예: .free-bar{gap:8px} */
  --sp-3: 12px;  /* 카드 내부·리스트 항목 간 - 예: .tbx{gap:12px} */
  --sp-4: 16px;  /* 카드 패딩 - 예: .pvcard{padding:16px 16px 14px}(home/med/reading) */
  --sp-5: 20px;  /* 버튼 상단 여백 - 예: .btn-primary{margin-top:20px}(home) */
  --sp-6: 24px;  /* 섹션 상단 패딩 - 예: .today-hero{padding:22px 0 26px}의 22px 쪽 */
  --sp-7: 28px;  /* 섹션 하단 패딩 - 예: 위 규칙의 26px 쪽 */
  --sp-8: 32px;  /* 섹션 간 큰 간격 - 예: .past-on-home{margin-top:30px}(home) */
  --sp-9: 40px;  /* 히어로급 섹션 상단 여백 - 예: .reading{margin-top:40px}(med/reading) */
  --sp-10: 48px; /* 히어로급 섹션 상단 여백 - 예: .cta{margin-top:48px}(home) */
  --sp-12: 64px; /* 히어로급 섹션 상단 여백 - 예: .yest{margin-top:60px}(home, 60->64 반올림) */

  /* --------------------------------------------------------
   * 글자 크기 스케일 - 6단계
   * 출처: 디자인토큰_명세_v1.md 2절(관측 415건 집계 결과).
   * -------------------------------------------------------- */
  --fs-1: 12px; /* 라벨·캡션·메타 - 예: .mref, .mtag(home) */
  --fs-2: 16px; /* 본문·카드 발췌·채팅 버블 - 예: .msnip(home), .bubble(med/reading) */
  --fs-3: 20px; /* 부제목 */
  --fs-4: 24px; /* 소제목 */
  --fs-5: 28px; /* 소제목(큰 쪽) */
  --fs-6: 32px; /* 큰 제목 */

  /* --------------------------------------------------------
   * 모서리 스케일 - 4단계 + 의미형 2종
   * 출처: 디자인토큰_명세_v1.md 3절(관측 262건 집계 결과, 2026-08-03
   * SWAN 결정으로 radius-4 신설 포함).
   * ⚠️ --radius-full은 반드시 50%(상대값)로 쓴다. 피그마에는 코너
   * 반경에 상대값을 못 담아 9999로 심었지만, CSS로 되돌릴 때
   * 9999를 그대로 쓰면 안 된다(명세서 3절 경고 그대로 반영).
   * -------------------------------------------------------- */
  --radius-1: 8px;    /* 아이콘 버튼·소형 인풋 - 예: .nav button{border-radius:9px}(home) */
  --radius-2: 12px;   /* 기본 카드·입력창·팝오버 - 예: .swan-write, .cv-askbox */
  --radius-3: 16px;   /* 큰 카드·시트류 - 예: .mcard, .bubble(med/reading) */
  --radius-4: 20px;   /* 바텀시트·토스트 상단 모서리 - 예: .sc-card{border-radius:20px}(med/reading) */
  --radius-pill: 999px; /* 알약형 버튼·토글·태그 - 예: .mtag, .hl-toggle */
  --radius-full: 50%;   /* 원형 아바타·점·다크모드 토글. 반드시 50%(피그마 9999 아님) */

  /* --------------------------------------------------------
   * 그림자 스케일 - 4단계
   * 출처: 디자인토큰_명세_v1.md 4절(관측, 문자열 그대로 비교).
   * 이번엔 명세서 값을 그대로 믿지 않고 6화면 box-shadow 선언을
   * 전부 grep해 대조했다(베이스 색 0-1절에서 명세서가 한 번
   * 틀렸던 전례가 있었기 때문). 대조 결과 4단계 전부 명세서 값과
   * 실제 앱이 정확히 일치했다(색과 달리 이번엔 어긋난 자리 없음).
   * data-mode(light/dark/navy/sage)별로 다른 box-shadow 선언은
   * 6화면 어디에도 없었다 - 전부 모드 무관 고정값이라 :root에
   * 한 번만 둔다.
   * -------------------------------------------------------- */
  --shadow-1: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  /* 카드 기본 그림자 - 실제 앱 문자열 그대로 일치하는 자리:
     home.html:113 .mcard, med.html:1463 .rp-btn,
     onboarding.html:75/84/112 .sample/.opt/.cs-card, settings.html:128 .rows */
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.18);
  /* 플로팅 버튼·툴팁·캡슐 - 실제 앱 문자열 그대로 일치:
     reading.html:2773 penTip, reading.html:2798 tip, reading.html:2822 askBtn
     (같은 8px/6px 계열 안에 알파값만 다른 변형이 med.html/reading.html에 다수
     있음 - .22/.28/.12/.08 등. 그 변형들은 카드류가 아니라 개별 컴포넌트
     맞춤값이라 별도 토큰화하지 않고 이 파일엔 명세서가 대표값으로 고른
     .18만 담았다) */
  --shadow-3: 0 8px 30px rgba(0, 0, 0, 0.16);
  /* 드롭다운·팝오버·프리뷰 토글바 - 실제 앱 문자열 그대로 일치:
     home.html:160 .preview류, med.html:971, reading.html:1467, settings.html:174 .preview */
  --shadow-4: 0 12px 50px rgba(0, 0, 0, 0.3);
  /* 화면 중앙 고정 토스트/모달 카드 - 실제 앱 문자열 그대로 일치:
     med.html:3222 .sc-card, reading.html:4801 .sc-card(med와 코드 중복) */

  /* --------------------------------------------------------
   * 베이스 색 - light(기본, data-mode 속성 없을 때)
   * 출처: 6화면 <style> 직접 grep 대조(전부 동일값 확인).
   *   home.html:17-20, med.html:20-30, reading.html:23,
   *   community.html:21, onboarding.html:19, settings.html:15
   *
   * ⚠️ 베이스 색 출처 메모 (명세서와 다른 자리)
   * 디자인토큰_명세_v1.md 0-1절 표의 light·dark 칸(--ink-soft·
   * --ink-muted·--ink-faint·--line·--hair)을 실제 6화면 코드와
   * 대조해보니, "실제 앱" 값이 아니라 "_base.css" 값과 정확히
   * 일치했다(명세서가 스스로 "실제 앱이 정본"이라고 밝혀둔 것과
   * 모순). 아래는 6화면을 직접 grep해서 확인한 진짜 실제 앱 값이다.
   * navy·sage 두 모드는 명세서 표와 실제 앱이 서로 일치했다(그
   * 두 모드는 _base.css에 아예 없어서 명세서도 실제 앱에서만
   * 가져올 수 있었기 때문으로 보인다). 아래 표로 정리:
   *
   *   변수         | 명세서 0-1절(light) | 실제 앱(light, 이 파일 값) | _base.css(light)
   *   --ink-soft   | #46423a             | #4a4639                    | #46423a (일치)
   *   --ink-faint  | #bcb4a2             | #a39b8c                    | #bcb4a2 (일치)
   *   --line       | #e7e1d4             | #d8d0bf                    | #e7e1d4 (일치)
   *   --hair       | #efe9dd             | #efe9dc                    | #efe9dd (일치)
   *   (--ink-muted는 light 한정 명세서·앱·_base.css 셋 다 #837c6c로 일치)
   *
   *   변수         | 명세서 0-1절(dark)  | 실제 앱(dark, 이 파일 값)  | _base.css(dark)
   *   --ink-soft   | #cfc9ba             | #d3cdbd                    | #cfc9ba (일치)
   *   --ink-muted  | #948c7a             | #a39b8c                    | #948c7a (일치)
   *   --ink-faint  | #5f5a4d             | #837c6c                    | #5f5a4d (일치)
   *   --line       | #29271f             | #2f2a20                    | #29271f (일치)
   *   --hair       | #201e17             | #232118                    | #201e17 (일치)
   *
   * 즉 명세서 0-1절의 light·dark 칸은 사실상 _base.css를 옮겨
   * 적은 것으로 보인다. 이 파일은 "실제 앱이 정본"이라는 프로젝트
   * 원칙(CLAUDE.md·명세서 본문 둘 다 명시)을 따라 오른쪽(실제 앱)
   * 값을 썼다. SWAN님 확인 필요 - 명세서 0-1절 light·dark 칸도
   * 이 값으로 정정할지 결정 바람.
   * -------------------------------------------------------- */
  --bg: #f6f3ec;
  --surface: #fffdf7;
  --ink: #1c1a14;
  --ink-soft: #4a4639;
  --ink-muted: #837c6c;
  --ink-faint: #a39b8c;
  --line: #d8d0bf;
  --line-soft: #efe9dc; /* 실제 앱 코드의 변수명. 명세서는 이 역할을 --hair라 부름(값 동일한 역할) */
  --hair: var(--line-soft); /* 명세서 이름 호환용 별칭. 정식 통합 여부는 명세서 6-5절 후속 과제 */

  /* 앵커 8색 중 기본값(orange) - data-accent 속성 없을 때 */
  --accent: #b85a23;
  --on-accent: #fff;
  --accent-wash: rgba(184, 90, 35, 0.08);
}

/* ============================================================
 * 베이스 색 - dark
 * 출처: home.html:23-27, med.html:35-45 (외 4화면 동일)
 * ============================================================ */
html[data-mode="dark"] {
  --bg: #100f0a;
  --surface: #1c1a14;
  --ink: #f6f3ec;
  --ink-soft: #d3cdbd;
  --ink-muted: #a39b8c;
  --ink-faint: #837c6c;
  --line: #2f2a20;
  --line-soft: #232118;
}

/* ============================================================
 * 베이스 색 + 기본 앵커(orange) - navy
 * navy·sage는 _base.css에 정의 자체가 없다(직접 확인) - 실제 앱에만
 * 있는 값이며 명세서 0-1절 navy 칸과도 정확히 일치한다(충돌 없음).
 * 출처: home.html:28, med.html:46 (외 4화면 동일)
 * ============================================================ */
html[data-mode="navy"] {
  color-scheme: dark;
  --bg: #0e1622;
  --surface: #16202e;
  --ink: #e9eef6;
  --ink-soft: #c2cdda;
  --ink-muted: #8b97a8;
  --ink-faint: #5a6577;
  --line: #243245;
  --line-soft: #1b2735;
  --accent: #e3b04b;
  --on-accent: #1a1206;
  --accent-wash: rgba(227, 176, 75, 0.13);
}

/* ============================================================
 * 베이스 색 + 기본 앵커(orange) - sage
 * 명세서 0-1절 sage 칸과 정확히 일치(충돌 없음).
 * 출처: home.html:37, med.html:55 (외 4화면 동일)
 * ============================================================ */
html[data-mode="sage"] {
  color-scheme: light;
  --bg: #eaeee3;
  --surface: #f5f8ef;
  --ink: #272b22;
  --ink-soft: #4a503f;
  --ink-muted: #79806b;
  --ink-faint: #a7ad97;
  --line: #d5dac8;
  --line-soft: #e3e7d7;
  --accent: #b05f33;
  --on-accent: #fff;
  --accent-wash: rgba(176, 95, 51, 0.1);
}

/* ============================================================
 * 앵커 8색 (data-accent) x 4모드
 * 출처: home.html:46-61, med.html:65-165 (외 4화면 동일).
 * light·dark의 red·yellow·blue·mono 4색은 명세서 0-2절이 밝힌 대로
 * _base.css와 실제 앱이 일치한다. orange·cyan·lime·violet의 dark
 * 값만 _base.css와 실제 앱이 달랐고(명세서 0-2절에 SWAN 결정으로
 * 등재됨), 아래는 실제 앱 값이다.
 * ============================================================ */

/* --- orange (기본 액센트) --- */
html[data-accent="orange"] { --accent: #b85a23; --on-accent: #fff; --accent-wash: rgba(184, 90, 35, 0.08); }
html[data-mode="dark"][data-accent="orange"] { --accent: #d8743a; --on-accent: #1b0f06; --accent-wash: rgba(216, 116, 58, 0.12); }
html[data-mode="navy"][data-accent="orange"] { --accent: #e3b04b; --on-accent: #1a1206; --accent-wash: rgba(227, 176, 75, 0.13); }
html[data-mode="sage"][data-accent="orange"] { --accent: #b05f33; --on-accent: #fff; --accent-wash: rgba(176, 95, 51, 0.1); }

/* --- cyan --- */
html[data-accent="cyan"] { --accent: #0e8aa6; --on-accent: #fff; --accent-wash: rgba(14, 138, 166, 0.08); }
html[data-mode="dark"][data-accent="cyan"] { --accent: #33e7ff; --on-accent: #06242b; --accent-wash: rgba(51, 231, 255, 0.12); }
html[data-mode="navy"][data-accent="cyan"] { --accent: #5ad1e6; --on-accent: #06242b; --accent-wash: rgba(90, 209, 230, 0.14); }
html[data-mode="sage"][data-accent="cyan"] { --accent: #3a7d80; --on-accent: #fff; --accent-wash: rgba(58, 125, 128, 0.1); }

/* --- lime --- */
html[data-accent="lime"] { --accent: #5f8c12; --on-accent: #fff; --accent-wash: rgba(95, 140, 18, 0.08); }
html[data-mode="dark"][data-accent="lime"] { --accent: #aef24a; --on-accent: #16230a; --accent-wash: rgba(174, 242, 74, 0.12); }
html[data-mode="navy"][data-accent="lime"] { --accent: #a3e063; --on-accent: #16230a; --accent-wash: rgba(163, 224, 99, 0.14); }
html[data-mode="sage"][data-accent="lime"] { --accent: #5f7d2e; --on-accent: #fff; --accent-wash: rgba(95, 125, 46, 0.1); }

/* --- violet --- */
html[data-accent="violet"] { --accent: #6f49c7; --on-accent: #fff; --accent-wash: rgba(111, 73, 199, 0.08); }
html[data-mode="dark"][data-accent="violet"] { --accent: #b496ff; --on-accent: #150a2b; --accent-wash: rgba(180, 150, 255, 0.12); }
html[data-mode="navy"][data-accent="violet"] { --accent: #b89cff; --on-accent: #150a2b; --accent-wash: rgba(184, 156, 255, 0.15); }
html[data-mode="sage"][data-accent="violet"] { --accent: #74548a; --on-accent: #fff; --accent-wash: rgba(116, 84, 138, 0.1); }

/* --- red --- */
html[data-accent="red"] { --accent: #b23b2e; --on-accent: #fff; --accent-wash: rgba(178, 59, 46, 0.08); }
html[data-mode="dark"][data-accent="red"] { --accent: #ff5147; --on-accent: #2b0a06; --accent-wash: rgba(255, 81, 71, 0.13); }
html[data-mode="navy"][data-accent="red"] { --accent: #ff6f61; --on-accent: #2b0a06; --accent-wash: rgba(255, 111, 97, 0.14); }
html[data-mode="sage"][data-accent="red"] { --accent: #a8472f; --on-accent: #fff; --accent-wash: rgba(168, 71, 47, 0.1); }

/* --- yellow --- */
html[data-accent="yellow"] { --accent: #b3820f; --on-accent: #fff; --accent-wash: rgba(179, 130, 15, 0.08); }
html[data-mode="dark"][data-accent="yellow"] { --accent: #f5e050; --on-accent: #2b2606; --accent-wash: rgba(245, 224, 80, 0.13); }
html[data-mode="navy"][data-accent="yellow"] { --accent: #f2d65a; --on-accent: #2b2606; --accent-wash: rgba(242, 214, 90, 0.14); }
html[data-mode="sage"][data-accent="yellow"] { --accent: #a07d22; --on-accent: #fff; --accent-wash: rgba(160, 125, 34, 0.1); }

/* --- blue --- */
html[data-accent="blue"] { --accent: #2f5d8c; --on-accent: #fff; --accent-wash: rgba(47, 93, 140, 0.08); }
html[data-mode="dark"][data-accent="blue"] { --accent: #4da6ff; --on-accent: #06182b; --accent-wash: rgba(77, 166, 255, 0.13); }
html[data-mode="navy"][data-accent="blue"] { --accent: #6aa8ff; --on-accent: #06182b; --accent-wash: rgba(106, 168, 255, 0.15); }
html[data-mode="sage"][data-accent="blue"] { --accent: #3f6485; --on-accent: #fff; --accent-wash: rgba(63, 100, 133, 0.1); }

/* --- mono --- */
html[data-accent="mono"] { --accent: #1c1a14; --on-accent: #fff; --accent-wash: rgba(28, 26, 20, 0.07); }
html[data-mode="dark"][data-accent="mono"] { --accent: #f4f0e6; --on-accent: #100f0a; --accent-wash: rgba(244, 240, 230, 0.12); }
html[data-mode="navy"][data-accent="mono"] { --accent: #d8e0ee; --on-accent: #0e1622; --accent-wash: rgba(216, 224, 238, 0.12); }
html[data-mode="sage"][data-accent="mono"] { --accent: #3a3d33; --on-accent: #fff; --accent-wash: rgba(58, 61, 51, 0.08); }

/*
 * 강조색 고르기 동그라미의 식별색 (--sw-*)
 * ------------------------------------------------------------
 * 위의 --accent 는 "지금 고른 색" 하나만 가리키므로, 8색을 동시에 늘어놓는
 * 고르기 화면(.swatches)을 표현할 수 없다. 그래서 8색 각각의 고정 식별색을
 * 따로 둔다. 이 값들은 테마를 따라가지 않는다(라이트에서도 같은 팔레트로 보인다).
 * 쓰는 곳은 _parts.css 의 .sw-* 규칙.
 * 출처: 20개 화면이 이 값으로 동일.
 * 주의: catalog2.html·catalog3.html 두 옛 카탈로그만 orange·cyan·lime·violet 4색이
 * 어긋나 있다(#df7a3e / #39e9ff / #b4f24f / #bb9dff). 소수라 다수값을 정본으로 삼았다.
 * conti.html 은 값은 같고 선언 순서만 다르다(표시 결과 동일).
 */
:root {
  --sw-orange: #d8743a;
  --sw-cyan:   #33e7ff;
  --sw-lime:   #aef24a;
  --sw-violet: #b496ff;
  --sw-red:    #ff5147;
  --sw-yellow: #f5e050;
  --sw-blue:   #4da6ff;
  /* mono 는 두 색을 반씩 나눈 대각선이라 단일 색이 아니다 */
  --sw-mono-a: #111;
  --sw-mono-b: #f4f0e6;
}