/* 2315 MOON_2048 — 컬러 토큰 (극단 미니멀 · 모노크롬)
 * 라이트 기본 + 다크 토글. 순백 배경, 액센트를 잉크 1색으로 흡수.
 * 그라디언트·글래스·글로우·다색·그림자 없음. 여백과 얇은 헤어라인으로만 구성.
 * 타일 값은 다색 대신 "무채 명도 스케일"(--t2…--tbig): 라이트=값 클수록 진하게, 다크=값 클수록 밝게.
 * 오답/게임오버 등 최소 기능색만 danger.
 */
: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);
  --board-bg: #ECECEC;      /* 셀 사이 헤어라인(격자) 색 */
  --cell-empty: #F4F4F4;    /* 빈 칸 */
  --danger: #C62828;
  --danger-soft: rgba(198, 40, 40, 0.07);
  --shadow: none;
  /* 타일 명도 스케일 (라이트: 값 클수록 진하게) */
  --t2: #ECECEC;   --t2f: #111;
  --t4: #DEDEDE;   --t4f: #111;
  --t8: #CDCDCD;   --t8f: #111;
  --t16: #BABABA;  --t16f: #111;
  --t32: #A4A4A4;  --t32f: #111;
  --t64: #8C8C8C;  --t64f: #FFF;
  --t128: #747474; --t128f: #FFF;
  --t256: #5C5C5C; --t256f: #FFF;
  --t512: #454545; --t512f: #FFF;
  --t1024: #2E2E2E; --t1024f: #FFF;
  --t2048: #111111; --t2048f: #FFF;
  --t4096: #000000; --t4096f: #FFF;
  --tbig: #000000; --tbigf: #FFF;
}

: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);
  --board-bg: #232326;
  --cell-empty: #1B1B1E;
  --danger: #F26D6D;
  --danger-soft: rgba(242, 109, 109, 0.12);
  --shadow: none;
  /* 타일 명도 스케일 (다크: 값 클수록 밝게) */
  --t2: #2C2C30;   --t2f: #C0C0C4;
  --t4: #3A3A3F;   --t4f: #CCCCD0;
  --t8: #48484E;   --t8f: #D8D8DC;
  --t16: #58585F;  --t16f: #E4E4E8;
  --t32: #6A6A72;  --t32f: #F0F0F0;
  --t64: #7E7E86;  --t64f: #FFF;
  --t128: #94949C; --t128f: #0B0B0C;
  --t256: #ABABB2; --t256f: #0B0B0C;
  --t512: #C2C2C8; --t512f: #0B0B0C;
  --t1024: #D8D8DC; --t1024f: #0B0B0C;
  --t2048: #ECECEC; --t2048f: #0B0B0C;
  --t4096: #FFFFFF; --t4096f: #000;
  --tbig: #FFFFFF; --tbigf: #000;
}

@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);
    --board-bg: #232326; --cell-empty: #1B1B1E;
    --danger: #F26D6D; --danger-soft: rgba(242,109,109,0.12); --shadow: none;
    --t2: #2C2C30; --t2f: #C0C0C4; --t4: #3A3A3F; --t4f: #CCCCD0;
    --t8: #48484E; --t8f: #D8D8DC; --t16: #58585F; --t16f: #E4E4E8;
    --t32: #6A6A72; --t32f: #F0F0F0; --t64: #7E7E86; --t64f: #FFF;
    --t128: #94949C; --t128f: #0B0B0C; --t256: #ABABB2; --t256f: #0B0B0C;
    --t512: #C2C2C8; --t512f: #0B0B0C; --t1024: #D8D8DC; --t1024f: #0B0B0C;
    --t2048: #ECECEC; --t2048f: #0B0B0C; --t4096: #FFFFFF; --t4096f: #000;
    --tbig: #FFFFFF; --tbigf: #000;
  }
}