/* 色の役割の定義（仕様書 第 6 章「色」）。CSS と JS で色の値を書くのはこのファイルだけで、ほかは役割の CSS 変数だけを使う（C6-4-2）。
   値は確定した案J（O1。docs/design/J/）の値で、全サイトで同じ。T-139 で確定した。
   「線」は区切りの線と押せない囲みの枠、「押せる部品の枠」は押せる部品の枠で、線より濃い（第 6 章「色」）。
   プレイヤーの板の縁・欄の区切り・バーの線・影（--color-player-border・-line・-track・-shadow）は案J の値で、T-140 が足した。
   プレイヤーの地は半透明で、白に重ねても文字とボタンが読めることを test/colors.test.mjs が確かめる（C6-4-7）。
   主色から作る役割（--color-primary・--color-primary-text・--color-primary-tint）はここに書かない。
   build が site.json の primary から作り、出力のこのファイルの後ろに足す（scripts/lib/render/colors.mjs） */
:root {
  --color-bg: #FFFFFF;
  --color-text: #1B1B1B;
  --color-text-muted: #6A6A6A;
  --color-line: #E6E3DF;
  --color-control-border: #D5D2CD;
  --color-current: #F3F1EE;
  --color-on-primary: #FFFFFF;
  --color-player-bg: rgba(24, 24, 24, 0.82);
  --color-player-text: #FFFFFF;
  --color-player-text-muted: rgba(255, 255, 255, 0.68);
  --color-player-play: #FFFFFF;
  --color-player-play-icon: #1B1B1B;
  --color-player-border: rgba(255, 255, 255, 0.08);
  --color-player-line: rgba(255, 255, 255, 0.14);
  --color-player-track: rgba(255, 255, 255, 0.2);
  --color-player-shadow: rgba(0, 0, 0, 0.25);
}

/* ダークの組（P1a。値は案J の J4-dark・J5-dark。ここに無い役割のダークの値と画面への当て方は T-185 が足す） */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141414;
    --color-text: #ECEAE6;
    --color-text-muted: #A8A49E;
    --color-line: #2C2B29;
    --color-current: #262523;
  }
}

/* site.json の primary から build が作った役割（仕様書 第 6 章「色」） */
:root {
  --color-primary: #127C52;
  --color-primary-text: #127C52;
  --color-primary-tint: #E3EFEA;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary-text: #159361;
    --color-primary-tint: #14201B;
  }
}