/* 곱절 — 색.
 *
 * 레이아웃(style.css)과 색을 갈라놨다. 밝은 화면을 넣으면서 색이 두 벌이 됐는데,
 * 두 벌을 레이아웃 파일에 섞으면 "이 색을 고치면 어디가 바뀌나"를 아무도 못 쫓는다.
 *
 * 규칙: style.css 에는 색을 직접 쓰지 않는다. 전부 여기 이름으로만 쓴다.
 *       새 색이 필요하면 여기에 두 벌(어두운/밝은)을 같이 만든다.
 *
 * 고르는 방법
 *   data-theme 없음  → 기기 설정을 따라간다(밤에 켜면 어둡게)
 *   data-theme="dark"/"light" → 사용자가 직접 고른 것. 기기 설정보다 우선한다.
 */

:root{
  --bg:#0e1219; --panel:#161d28; --cell:#1e2836; --line:#28344699;
  --fg:#e8eef7; --dim:#8fa0b8;

  --gold:#f2c14e;        /* 금색 — 배경으로 쓸 때 */
  --goldtext:#f2c14e;    /* 금색 — 글자로 쓸 때 (밝은 화면에선 훨씬 진해진다) */
  --ongold:#20180a;      /* 금색 위에 얹는 글자 */
  --goldsh:#b08a2a; --goldtint:#f2c14e18; --goldline:#f2c14e33; --goldedge:#f2c14e66;

  --accent:#3b82f6; --accenttint:#3b82f61f; --accentfg:#8fb8f0; --accentring:#3b82f655;

  --ok:#2eb865; --oktint:#2eb86518; --okfg:#6fdc9b; --okon:#07210f; --oksh:#1d7a43;

  --cellbg:#19222f;      /* 판의 빈 칸 */
  --rowline:#1b2431;     /* 순위표 줄 사이 */
  --seatline:#243044; --seatfg:#3d4c63;   /* 대기실 빈자리 — 일부러 흐리다 */

  --scrim:#0b0f16d9;     /* 안내 덮개 */
  --ovbg:#0e1219e8;      /* 결과창 덮개 */
  --goscreen:#0e1219;    /* 출발 신호 배경 */
  --fabsh:0 4px 0 var(--goldsh), 0 8px 22px #0009;
  --fabsh2:0 2px 0 var(--goldsh), 0 5px 14px #0009;
  --tilesh:0 2px 0 #0006, 0 1px 3px #0004;

  --t2bg:#3a465c; --t2fg:#dce6f4;
  --t4bg:#4a5a76; --t4fg:#eaf1fb;
}

/* 밝은 화면.
   그냥 색을 뒤집으면 눈이 아프다 — 바탕을 순백 대신 살짝 푸른 회색으로 두고,
   카드만 흰색으로 띄웠다. 그래야 카드 경계가 선 없이도 읽힌다.
   금색·초록은 밝은 바탕에서 글자로 쓰면 안 보여서 글자용을 따로 진하게 뒀다. */
:root[data-theme="light"]{
  --bg:#eef1f7; --panel:#ffffff; --cell:#e4eaf3; --line:#d0d9e8;
  --fg:#131b27; --dim:#5a6879;

  --gold:#f0b429; --goldtext:#8f6206; --ongold:#20180a;
  --goldsh:#c08d15; --goldtint:#f0b42921; --goldline:#f0b42959; --goldedge:#d9a01f;

  --accent:#2563eb; --accenttint:#2563eb14; --accentfg:#1d4ed8; --accentring:#2563eb4d;

  --ok:#1d9c52; --oktint:#1d9c5216; --okfg:#157a3e; --okon:#ffffff; --oksh:#146b37;

  --cellbg:#dbe2ee;
  --rowline:#e6ebf3;
  --seatline:#c3cddd; --seatfg:#93a1b5;

  --scrim:#eef1f7d9;
  --ovbg:#ffffffe6;
  --goscreen:#eef1f7;
  --fabsh:0 4px 0 var(--goldsh), 0 8px 22px #0f1c3320;
  --fabsh2:0 2px 0 var(--goldsh), 0 5px 14px #0f1c3318;
  --tilesh:0 2px 0 #0000001c, 0 1px 3px #00000012;

  --t2bg:#dbe3f0; --t2fg:#2b3648;
  --t4bg:#c3d0e6; --t4fg:#22304a;
}

/* 아무것도 안 고른 사람은 기기 설정을 따른다. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#eef1f7; --panel:#ffffff; --cell:#e4eaf3; --line:#d0d9e8;
    --fg:#131b27; --dim:#5a6879;

    --gold:#f0b429; --goldtext:#8f6206; --ongold:#20180a;
    --goldsh:#c08d15; --goldtint:#f0b42921; --goldline:#f0b42959; --goldedge:#d9a01f;

    --accent:#2563eb; --accenttint:#2563eb14; --accentfg:#1d4ed8; --accentring:#2563eb4d;

    --ok:#1d9c52; --oktint:#1d9c5216; --okfg:#157a3e; --okon:#ffffff; --oksh:#146b37;

    --cellbg:#dbe2ee;
    --rowline:#e6ebf3;
    --seatline:#c3cddd; --seatfg:#93a1b5;

    --scrim:#eef1f7d9;
    --ovbg:#ffffffe6;
    --goscreen:#eef1f7;
    --fabsh:0 4px 0 var(--goldsh), 0 8px 22px #0f1c3320;
    --fabsh2:0 2px 0 var(--goldsh), 0 5px 14px #0f1c3318;
    --tilesh:0 2px 0 #0000001c, 0 1px 3px #00000012;

    --t2bg:#dbe3f0; --t2fg:#2b3648;
    --t4bg:#c3d0e6; --t4fg:#22304a;
  }
}