/* Change presentation here, independently of viewing-state behaviour. */
:root {
  color-scheme: light;
  --paper: #f2eee5;
  --surface: #e7e2d7;
  --ink: #272b24;
  --muted: #62665b;
  --rule: #c6c8ba;
  --accent: #3b513b;
  --overlay: rgb(16 20 15 / 55%);
  --display-font: Georgia, "Times New Roman", serif;
  --body-font: "Helvetica Neue", Arial, sans-serif;
  --page-width: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
  --panel-gap: clamp(28px, 5vw, 80px);
  --view-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  --art-column: 1;
  --art-row: 1;
  --info-column: 2;
  --info-row: 1;
}

:root[data-theme="white"] {
  --paper: #fafaf7;
  --surface: #eeeee7;
  --ink: #222620;
  --muted: #5c6057;
  --rule: #c7ccbf;
  --accent: #355343;
}

:root[data-theme="charcoal"] {
  color-scheme: dark;
  --paper: #222720;
  --surface: #2c3329;
  --ink: #f2f0e8;
  --muted: #b7beaf;
  --rule: #59634f;
  --accent: #c4d1ad;
}

:root[data-layout="artwork-right"] {
  --art-column: 2;
  --info-column: 1;
}

:root[data-layout="stacked"] {
  --view-columns: minmax(0, 1fr);
  --art-column: 1;
  --art-row: 1;
  --info-column: 1;
  --info-row: 2;
}