:root {
  color-scheme: light dark;
  --bg: #F4F8FB;
  --surface: #FFFFFF;
  --surface2: #E8F0F5;
  --text: #071725;
  --muted: #4A6476;
  --rule: #6F8A9C;
  --link: #0B5E8E;
  --inkButton: #0A2A3D;
  --onInkButton: #FFFFFF;
  --safeWash: #DDF7EE;
  --safeInk: #115C49;
  --kingBack: #0A2A3D;
  --kingEye: #0A2A3D;
  --kingGold: #FFD43B;
  --penguinWhite: #FFFFFF;
  --penguinOrange: #FF9B45;
  --hairline: #DCE6EC;
  --sky: #D5ECFA;
  --deep: #0A2A3D;
  --onDeep: #FFFFFF;
  --onDeepMuted: #C3DCEB;
  --water: #174E70;
  --bergA: #174E70;
  --bergB: #304F64;
  --bergC: #4A6476;
  --iceTop: #FFFFFF;
  --iceA: #DCE6EC;
  --iceB: #C3DCEB;
  --held: #7CF2C9;
  --onHeld: #062118;
  --frame: #0A2A3D;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: #061C29;
  --surface: #0E2C3B;
  --surface2: #17394A;
  --text: #FFFFFF;
  --muted: #B4CCD9;
  --rule: #6E93A6;
  --link: #A5E3FF;
  --inkButton: #A5E3FF;
  --onInkButton: #062033;
  --safeWash: #1D484F;
  --safeInk: #7CF2C9;
  --kingBack: #2C5F7D;
  --kingEye: #061C29;
  --kingGold: #FFD43B;
  --penguinWhite: #FFFFFF;
  --penguinOrange: #FF9B45;
  --hairline: #1F4153;
  --sky: #0E2C3B;
  --deep: #030B13;
  --onDeep: #FFFFFF;
  --onDeepMuted: #B4CCD9;
  --water: #2C5F7D;
  --bergA: #0E2C3B;
  --bergB: #17394A;
  --bergC: #1D4A60;
  --iceTop: #A5E3FF;
  --iceA: #6E93A6;
  --iceB: #2C5F7D;
  --held: #7CF2C9;
  --onHeld: #062118;
  --frame: #6E93A6;
  }
}