/* 2312 MOON_NONOGRAM — 컬러 토큰 (극단 미니멀 · 모노크롬)
 * 라이트 기본 + 다크 토글. 채운 칸=잉크(그림), 배경=순백, 액센트를 잉크 1색으로 흡수.
 * 그라디언트·글래스·글로우·다색·그림자 없음. 여백과 얇은 헤어라인으로만 구성. 오답 빨강만 최소 기능색.
 */
:root,
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F6F6F6;
  --line: #ECECEC;
  --line-strong: #D4D4D4;
  --ink: #111111;
  --ink-2: #6A6A6A;
  --ink-3: #9C9C9C;
  --accent: #111111;
  --accent-2: #111111;
  --accent-soft: rgba(17, 17, 17, 0.06);
  --accent-line: rgba(17, 17, 17, 0.30);
  --fill: #111111;          /* 채운 칸(그림) — 잉크 단색 */
  --fill-edge: #111111;
  --x: #B4B4B4;             /* X 표시(빈칸 마크) — 무채 */
  --cell-bg: #FFFFFF;
  --grid-tint: #FFFFFF;
  --danger: #C62828;
  --danger-soft: rgba(198, 40, 40, 0.07);
  --shadow: none;
}

:root[data-theme="dark"] {
  --bg: #0B0B0C;
  --surface: #0B0B0C;
  --surface-2: #171719;
  --line: #232326;
  --line-strong: #38383D;
  --ink: #ECECEC;
  --ink-2: #9A9A9E;
  --ink-3: #636367;
  --accent: #ECECEC;
  --accent-2: #ECECEC;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-line: rgba(255, 255, 255, 0.32);
  --fill: #ECECEC;
  --fill-edge: #ECECEC;
  --x: #55555A;
  --cell-bg: #0B0B0C;
  --grid-tint: #0B0B0C;
  --danger: #F26D6D;
  --danger-soft: rgba(242, 109, 109, 0.12);
  --shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0B0B0C; --surface: #0B0B0C; --surface-2: #171719;
    --line: #232326; --line-strong: #38383D;
    --ink: #ECECEC; --ink-2: #9A9A9E; --ink-3: #636367;
    --accent: #ECECEC; --accent-2: #ECECEC;
    --accent-soft: rgba(255,255,255,0.08); --accent-line: rgba(255,255,255,0.32);
    --fill: #ECECEC; --fill-edge: #ECECEC; --x: #55555A;
    --cell-bg: #0B0B0C; --grid-tint: #0B0B0C;
    --danger: #F26D6D; --danger-soft: rgba(242,109,109,0.12); --shadow: none;
  }
}