/* 색 5개 + 구분선 1개. 이 목록에 없는 색은 화면에 등장하지 않습니다.
   그라데이션·반투명 색면·세 번째 배경색은 이 시스템에 존재하지 않습니다. */

:root {
  /* base */
  --paper: #ffffff;         /* 배경 1 */
  --file: #f4f3f0;          /* 배경 2 · 카드 색면 (웜 그레이, 서류 봉투 톤) */
  --ink: #17191c;           /* 텍스트 1 — 흰 배경 대비 17:1 */
  --sub: #5c6169;           /* 텍스트 2 — 대비 5.8:1 */
  --line: #e4e2dd;          /* 구분선 — 색면으로 구분할 수 없는 곳에만 */
  --seal: #1b4b8a;          /* 강조 1개 — 판정과 행동에만. 대비 8.7:1 */
  --seal-hover: #17406f;
  --seal-press: #123458;

  /* semantic aliases */
  --surface-page: var(--paper);
  --surface-alt: var(--file);
  --surface-card: var(--paper);      /* file 배경 섹션 위의 카드 */
  --surface-card-alt: var(--file);   /* paper 배경 섹션 위의 카드 */
  --surface-input: var(--file);
  --surface-inverse: var(--ink);

  --text-heading: var(--ink);
  --text-body: var(--sub);
  --text-strong: var(--ink);
  --text-caption: var(--sub);
  --text-accent: var(--seal);
  --text-on-accent: var(--paper);
  --text-on-inverse: var(--paper);

  --border-hairline: var(--line);
  --focus-ring: var(--seal);

  --action-bg: var(--seal);
  --action-bg-hover: var(--seal-hover);
  --action-bg-press: var(--seal-press);
  --action-secondary-bg: var(--file);
  --action-secondary-bg-hover: var(--line);
}