/*
  Note: Property Class より優先度が下で定義すること
  Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
*/
.u--cbox {
  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
  --bgc: color-mix(in srgb, var(--base), var(--keycolor) var(--cbox-bgPct, 4%));
  --bdc: color-mix(in srgb, transparent, var(--keycolor) var(--cbox-bdPct, 64%));
  --link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる
  color: var(--c);
  background-color: var(--bgc);

  // 相対カラー構文をサポートしているブラウザでは、 shadowのカラーもキーカラーに寄せる
  @supports (color: oklch(from red l c h)) {
    --shc: oklch(from var(--keycolor) calc(l / 1.5) calc(c / 1.5) h / 0.1);
  }
}