:root,
html[data-theme='day'] {
  --petrol: #31555a;
  --slate: #526d83;
  --ochre: #b18a49;
  --moss: #7a8461;
  --clay: #a26652;
  --graphite: #262d30;
  --canvas: #9aa39c;
  --paper: #aab0a7;
  --ink: #142326;
  --muted: #1e2e31;
  --muted-strong: #182a2d;
  --accent: #3a2909;
  --accent-hover: #2d2007;
  --accent-contrast: #f1e4cf;
  --hero: #91a4a4;
  --projects: #8999a5;
  --writing: #be907b;
  --playground: #929b78;
  --line: rgb(20 35 38 / 28%);
  --line-soft: rgb(20 35 38 / 17%);
  --overlay: rgb(20 35 38 / 38%);
  --code-bg: #1b2b2e;
  --code-ink: #f1e4cf;
  color-scheme: light;
}

html[data-theme='evening'] {
  --petrol: #31555a;
  --slate: #526d83;
  --ochre: #b18a49;
  --moss: #7a8461;
  --clay: #a26652;
  --graphite: #262d30;
  --canvas: #182629;
  --paper: #223438;
  --ink: #e6ded1;
  --muted: #cbd0c5;
  --muted-strong: #d8d9cf;
  --accent: #e4ca8d;
  --accent-hover: #ecd9aa;
  --accent-contrast: #182629;
  --hero: #29484d;
  --projects: #344c5c;
  --writing: #754b3d;
  --playground: #4d5740;
  --line: rgb(230 222 209 / 20%);
  --line-soft: rgb(230 222 209 / 12%);
  --overlay: rgb(8 17 19 / 62%);
  --code-bg: #111d20;
  --code-ink: #e6ded1;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --petrol: #31555a;
    --slate: #526d83;
    --ochre: #b18a49;
    --moss: #7a8461;
    --clay: #a26652;
    --graphite: #262d30;
    --canvas: #182629;
    --paper: #223438;
    --ink: #e6ded1;
    --muted: #cbd0c5;
    --muted-strong: #d8d9cf;
    --accent: #e4ca8d;
    --accent-hover: #ecd9aa;
    --accent-contrast: #182629;
    --hero: #29484d;
    --projects: #344c5c;
    --writing: #754b3d;
    --playground: #4d5740;
    --line: rgb(230 222 209 / 20%);
    --line-soft: rgb(230 222 209 / 12%);
    --overlay: rgb(8 17 19 / 62%);
    --code-bg: #111d20;
    --code-ink: #e6ded1;
    color-scheme: dark;
  }
}