/*
 * ══════════════════════════════════════════════════════════════════
 *  차차 — 색·글자·간격의 **유일한 출처**
 * ══════════════════════════════════════════════════════════════════
 *
 * ⚠️⚠️ **컴포넌트 규칙에 색을 직접 쓰지 말 것.** 여기 토큰만 쓴다. 직접 쓰면
 *    밝게/어둡게 단추가 그 부분만 못 바꾼다.
 *
 * ⚠️⚠️ **색을 눈으로 정하지 말 것.** `node tools/contrast.mjs --check` 가
 *    화면에서 실제로 만나는 짝을 전부 잰다. 이 파일을 고치면 반드시 돌린다.
 *    이 프로젝트는 실제로 `#8B909E` 를 "충분히 진해 보인다" 고 썼다가
 *    3.19:1 인 걸 뒤늦게 알았다 — 학부모가 **차 오는 시각**을 읽는 글자였다.
 *
 * ──────────────────────────────────────────────────────────────────
 *  왜 이 색인가
 * ──────────────────────────────────────────────────────────────────
 *
 * ⚠️⚠️ **크림색(#FBF9F5 / #F4F1EA)으로 되돌리지 말 것.** 두 가지 이유다:
 *
 *   ① **지도가 주인공인데 껍데기가 지도와 같은 계열이었다.** 카카오 타일은
 *      따뜻한 베이지다. 그 옆에 따뜻한 크림 카드를 두면 둘이 섞여서, 정작
 *      봐야 할 지도가 배경처럼 물러난다. 지금은 **차가운 회색**이라 지도가
 *      앞으로 나온다.
 *   ② 따뜻한 크림 + 둥근 카드는 요즘 **자동 생성된 화면의 대표 얼굴**이다.
 *      이 앱은 학원장이 돈을 내고 쓰는 물건이라 그렇게 보이면 안 된다.
 *
 * ⚠️⚠️ **황색은 버스에만 쓴다.** 도로교통법상 어린이통학버스는 황색이어야
 *    한다 — 학부모가 이미 아는 색이라 "그 노란 차" 로 바로 읽힌다.
 *    단추·배지·강조에 같이 쓰면 그 근거가 통째로 희석된다.
 *    ⚠️ 주된 동작(저장·만들기)은 **먹색**(`--ink`)이다. 파랑·보라 그라데이션
 *       으로 바꾸지 말 것 — 그게 바로 '아무 앱' 의 얼굴이다.
 */

:root {
  /* ── 바탕 ───────────────────────────────────────────────────
     차가운 회색 세 단계. 지도 타일(따뜻한 베이지)에서 물러난다. */
  --paper:   #EFF1F4;      /* 화면 바탕 */
  --card:    #FFFFFF;      /* 카드·시트 */
  --raise:   #E4E8ED;      /* 카드 안에서 한 단 올라온 것 */

  /* ── 글자 ───────────────────────────────────────────────────
     세 단계면 충분하다. 더 늘리면 무엇이 더 중요한지 알 수 없다. */
  --ink:     #0F1319;      /* 제목·숫자 */
  --ink2:    #3D4652;      /* 본문 */
  --ink3:    #5E6874;      /* 라벨·잔글씨 — 흰 위 5.66:1 · 종이 위 5.00:1 */

  /* ── 선 ────────────────────────────────────────────────────
     ⚠️ `--line2`(입력칸 테두리)는 **3:1 을 넘어야 한다.** 예전 #D8D3C7 은
        1.49:1 이라 어디가 입력칸인지 보이지 않았다(실측). 지금 3.54:1. */
  --line:    #DCE1E7;      /* 나누는 선 */
  --line2:   #7F8998;      /* 만질 수 있는 것의 테두리 */

  /* ── 버스 ──────────────────────────────────────────────────
     통학버스 황색. ⚠️ 여기 말고 다른 데 쓰지 말 것(위 설명 참고). */
  --amber:   #B96A08;      /* 황색을 글자로 쓸 수 있게 낮춘 값 */
  --amber-b: #F5B324;      /* 차체·마커에 쓰는 진짜 황색 */
  --amber-s: #FBF0DC;

  /* ── 상태 ──────────────────────────────────────────────────
     ⚠️ 상태 색은 예약석이다 — "네 번째 계열" 로 돌려쓰지 말 것.
     ⚠️ 배지(글자/배경)는 전부 4.5:1 을 넘긴 짝이다. 짝을 따로 바꾸지 말 것. */
  --live:    #0B6B39;  --live-s: #E1F0E7;   /* 5.61:1 */
  --warn:    #8F5314;  --warn-s: #FAEEDC;   /* 5.37:1 */
  --stop:    #B3352E;  --stop-s: #FAE7E5;   /* 5.09:1 */

  /* ── 그림자 ────────────────────────────────────────────────
     ⚠️ **1px 테두리와 넓은 그림자를 같이 쓰지 말 것.** 붙어 있는 것은
        테두리만, 떠 있는 것은 그림자만. 둘을 같이 쓰는 것이 '생성된 화면'
        의 대표 신호다. */
  --shadow:  0 1px 2px rgba(15,19,25,.07), 0 8px 24px -8px rgba(15,19,25,.15);
  --shadow-l:0 2px 6px rgba(15,19,25,.11), 0 20px 50px -12px rgba(15,19,25,.30);

  /* ── 글자 크기 ─────────────────────────────────────────────
     ⚠️⚠️ **여덟 단계뿐이다. 사이에 새 값을 넣지 말 것.**
        예전에는 **스물세 가지**였고 그 절반이 `.5px` 였다(10.5·11.5·12.5·
        13.5·14.5·15.5). 눈으로 보고 조금씩 밀어 맞춘 흔적인데, 그게 화면을
        기계가 만든 것처럼 보이게 하는 가장 큰 이유였다.
        새 크기가 필요하면 **가까운 단계를 쓴다** — 없으면 그 화면이 잘못
        짜인 것이다.

     ⚠️⚠️ **11px 로 되돌리지 말 것.** 이 앱을 매일 보는 사람은 학원장(40~60대)
        과 학부모다. 잔글씨에 시각·거리·정류장 이름이 들어가는데, 11px 은
        그 나이대에서 **읽으려고 눈을 찌푸리는** 크기다. 아래 네 단계를
        한 칸씩 올려 12px 을 바닥으로 삼았다(12/13/14/15) — 단계 수는
        그대로 여덟이다. */
  --t-xs:   12px;   /* 배지·꼬리표 */
  --t-sm:   13px;   /* 라벨 */
  --t-md:   14px;   /* 표 안·잔글씨 */
  --t-base: 15px;   /* 본문 */
  --t-lg:   17px;   /* 소제목 */
  --t-xl:   20px;   /* 화면 제목 */
  --t-2xl:  26px;   /* 크게 읽는 숫자 */
  --t-3xl:  40px;   /* 시각 하나만 크게 */

  /* ── 반지름 ────────────────────────────────────────────────
     ⚠️⚠️ **세 단계뿐이다.** 예전에는 열 가지였다(7·8·10·12·13·14·16·20·
        99·999px). 값이 열 가지라는 것은 곧 **정한 적이 없다**는 뜻이다. */
  --r-sm: 8px;      /* 입력칸·작은 단추 */
  --r-md: 12px;     /* 카드·판·시트 */
  --r-full: 999px;  /* 알약(상태 배지) */

  /* ── 간격 ──────────────────────────────────────────────────
     4의 배수. 사이값을 쓰면 줄이 안 맞는다. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --sheet:   42svh;
  --hdr:     58px;
  --r:       var(--r-md);   /* 옛 이름 — 쓰던 곳이 있어 남겨 둔다 */
}

/*
 * 어두운 화면.
 *
 * ⚠️⚠️ **밝은 값을 뒤집어서 만들지 않는다.** 뒤집으면 대비가 무너진다 —
 *    같은 도구로 다시 재서 정한 값이다.
 * ⚠️ 세 상태다: 기기 설정 따르기(기본) · 밝게 · 어둡게. 아래 두 블록이
 *    각각 그 몫을 한다. 한쪽만 고치면 단추가 한 방향으로만 듣는다.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #101318;
    --card:    #191D24;
    --raise:   #222731;
    --ink:     #F1F3F6;
    --ink2:    #A6AEBB;
    --ink3:    #8A93A1;   /* 종이 위 6.02:1 · 카드 위 5.53:1 */
    --line:    #272C36;
    --line2:   #6B7484;   /* 카드 위 3.59:1 */
    --amber:   #F5B324;
    --amber-b: #F5B324;
    --amber-s: #2C2213;
    --live:    #35DC80;  --live-s: #0E2A1C;
    --warn:    #F2AC50;  --warn-s: #2D2314;
    --stop:    #F58279;  --stop-s: #2F1715;
    --shadow:  0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.7);
    --shadow-l:0 2px 6px rgba(0,0,0,.55), 0 20px 50px -12px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --paper: #101318; --card: #191D24; --raise: #222731;
  --ink: #F1F3F6; --ink2: #A6AEBB; --ink3: #8A93A1;
  --line: #272C36; --line2: #6B7484;
  --amber: #F5B324; --amber-b: #F5B324; --amber-s: #2C2213;
  --live: #35DC80; --live-s: #0E2A1C;
  --warn: #F2AC50; --warn-s: #2D2314;
  --stop: #F58279; --stop-s: #2F1715;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-l:0 2px 6px rgba(0,0,0,.55), 0 20px 50px -12px rgba(0,0,0,.8);
}