/* Light is the default regardless of the device theme. Dark is an explicit reader choice. */
:root {
  color-scheme: light;
  --font-sans: system-ui, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Yu Mincho", "Hiragino Mincho ProN", YuMincho, Georgia, serif;
  --color-bg: #f4f6f8;
  --color-surface: #fcfdfe;
  --color-bg-subtle: #e9eef3;
  --color-text: #283342;
  --color-text-muted: #5f6b78;
  --color-faint: #9aa8b5;
  --color-border: #d5dde5;
  --color-border-soft: #e3e9ef;
  --color-link: #526b84;
  --color-accent-soft: #e6edf4;
  /* Music-map colors carry meaning independently of the site's link accent. */
  --hue-tonic: #8a2f43;
  --hue-major: #b1542f;
  --hue-mediant: #8a5a14;
  --hue-dominant: #7a3f63;
  --hue-subdom: #436e30;
  --hue-graphite: #5d5c58;
  --radius: 4px;
  --measure: 42rem;
  --wide-measure: 68rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #232b35;
  --color-surface: #2b3541;
  --color-bg-subtle: #303c49;
  --color-text: #e6edf4;
  --color-text-muted: #b2bfcd;
  --color-faint: #8393a4;
  --color-border: #4a5b6d;
  --color-border-soft: #384858;
  --color-link: #adc9e3;
  --color-accent-soft: #34495d;
  --hue-tonic: #d98a9c;
  --hue-major: #d98a63;
  --hue-mediant: #cf9b53;
  --hue-dominant: #cf9bbd;
  --hue-subdom: #8fc070;
  --hue-graphite: #9b9a94;
}