/* 디자인 토큰 — C. 학습 노트 (팔레트 K-E4 LUMI Clean Lime, 라임 = 형광펜)
   색: 배경·글자·보조·선·포인트(형광펜 1색)·상태(정답/오답)만
   글자 크기 4단계: 12 라벨 / 15 UI / 18 본문 / 26 제목·숫자 (읽기 본문은 사용자 글자 크기 --font-size)
   간격 8pt: 4 8 16 24 32 48 · 좌우 여백 20 · 모서리 10 · 선 1px · 아이콘 선 1.75 · 그림자 거의 없음 */
:root {
  --bg: #F6F8F1;            /* 노트 종이 */
  --surface: #FCFDF9;       /* 시트·카드 */
  --text: #1E201C;
  --sub: #5F635A;           /* 보조 글자 (대비 AA를 위해 시안 #686C63보다 한 단계 진하게) */
  --line: #DCE3D3;          /* 구분선 */
  --rule: #ECF0E7;          /* 줄 노트 선 (아주 연하게) */
  --ink: #2B2D29;           /* 기본 버튼 = 연필심 차콜 */
  --on-ink: #F6F8F1;
  --accent: #CDEFB5;        /* 형광펜 면: 지금·핵심·완료에만 */
  --accent-soft: #E4F6D7;   /* 읽기 자·소리 하이라이트처럼 넓은 면 */
  --accent-strong: #3B6821; /* 형광펜 위 글자·작은 라벨·링크 */
  --accent-mid: #A8DC85;    /* 채운 별·체크·진행 막대 */
  --ok: #33702C;
  --ok-bg: #E6F3DE;
  --bad: #B23F27;
  --bad-bg: #FBEAE4;
  --focus: #3B6821;
  --scrim: rgba(30, 32, 28, 0.42);

  --fs-label: 12px;
  --fs-ui: 15px;
  --fs-body: 18px;
  --fs-display: 26px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --gutter: 20px;
  --r: 10px;
  --r-sm: 6px;
  --stroke: 1.75;
  --ease: cubic-bezier(.3, 0, .2, 1);
  --dur: 180ms;

  /* 읽기 본문 */
  --font-size: 18px;
  --line-height: 1.8;
  --letter-spacing: 0.01em;
  color-scheme: light;
}

/* 다크: 종이 대신 어두운 칠판색, 형광펜은 채도를 낮춰 눈부시지 않게 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #171916; --surface: #1F221E; --text: #E9ECE3; --sub: #A3A89A; --line: #33382F; --rule: #1F231D;
    --ink: #E9ECE3; --on-ink: #171916;
    --accent: #3A5229; --accent-soft: #283522; --accent-strong: #B7E59A; --accent-mid: #6E9A51;
    --ok: #8CCB7F; --ok-bg: #22301F; --bad: #EE8A6F; --bad-bg: #3A2320; --focus: #B7E59A; --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #171916; --surface: #1F221E; --text: #E9ECE3; --sub: #A3A89A; --line: #33382F; --rule: #1F231D;
  --ink: #E9ECE3; --on-ink: #171916;
  --accent: #3A5229; --accent-soft: #283522; --accent-strong: #B7E59A; --accent-mid: #6E9A51;
  --ok: #8CCB7F; --ok-bg: #22301F; --bad: #EE8A6F; --bad-bg: #3A2320; --focus: #B7E59A; --scrim: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}