/* Themes colour the scenery and column guides; characters keep their number identity. */
:root {
  --theme-accent: #7b5ad8;
  --theme-bright: #c4a7ff;
  --theme-secondary: #e9b450;
  --block-1: #ed303b;
  --block-2: #f5a832;
  --block-3: #ffe145;
  --block-4: #83c83e;
  --block-5: #48b9e0;
  --block-6: #6650ad;
  --block-7: #954cb0;
  --block-8: #e66ab0;
  --block-9: #b5b8be;
  --column-1-block: var(--block-1);
  --column-1-color: color-mix(in srgb, var(--block-1) 78%, #344357);
  --column-1-tint: color-mix(in srgb, var(--block-1) 14%, #fffdfb);
  --column-1-edge: color-mix(in srgb, var(--block-1) 50%, #fffdfb);
  --column-2-block: var(--block-2);
  --column-2-color: color-mix(in srgb, var(--block-2) 78%, #344357);
  --column-2-tint: color-mix(in srgb, var(--block-2) 14%, #fffdfb);
  --column-2-edge: color-mix(in srgb, var(--block-2) 50%, #fffdfb);
  --column-3-block: var(--block-3);
  --column-3-color: color-mix(in srgb, var(--block-3) 78%, #344357);
  --column-3-tint: color-mix(in srgb, var(--block-3) 14%, #fffdfb);
  --column-3-edge: color-mix(in srgb, var(--block-3) 50%, #fffdfb);
  --column-4-block: var(--block-4);
  --column-4-color: color-mix(in srgb, var(--block-4) 78%, #344357);
  --column-4-tint: color-mix(in srgb, var(--block-4) 14%, #fffdfb);
  --column-4-edge: color-mix(in srgb, var(--block-4) 50%, #fffdfb);
  --column-5-block: var(--block-5);
  --column-5-color: color-mix(in srgb, var(--block-5) 78%, #344357);
  --column-5-tint: color-mix(in srgb, var(--block-5) 14%, #fffdfb);
  --column-5-edge: color-mix(in srgb, var(--block-5) 50%, #fffdfb);
  --column-6-block: var(--block-6);
  --column-6-color: color-mix(in srgb, var(--block-6) 78%, #344357);
  --column-6-tint: color-mix(in srgb, var(--block-6) 14%, #fffdfb);
  --column-6-edge: color-mix(in srgb, var(--block-6) 50%, #fffdfb);
  --column-7-block: var(--block-7);
  --column-7-color: color-mix(in srgb, var(--block-7) 78%, #344357);
  --column-7-tint: color-mix(in srgb, var(--block-7) 14%, #fffdfb);
  --column-7-edge: color-mix(in srgb, var(--block-7) 50%, #fffdfb);
  --column-8-block: var(--block-8);
  --column-8-color: color-mix(in srgb, var(--block-8) 78%, #344357);
  --column-8-tint: color-mix(in srgb, var(--block-8) 14%, #fffdfb);
  --column-8-edge: color-mix(in srgb, var(--block-8) 50%, #fffdfb);
  --column-9-block: var(--block-9);
  --column-9-color: color-mix(in srgb, var(--block-9) 78%, #344357);
  --column-9-tint: color-mix(in srgb, var(--block-9) 14%, #fffdfb);
  --column-9-edge: color-mix(in srgb, var(--block-9) 50%, #fffdfb);
}
:root[data-theme="ocean"] {
  --theme-accent: #217f9a; --theme-bright: #7fdbf0; --theme-secondary: #d6b657;
  --block-1: #75c9e7; --block-2: #90d6cb; --block-3: #8eafe2;
  --block-4: #75bdd3; --block-5: #a3d7e6; --block-6: #83c8ad;
  --block-7: #a5bce8; --block-8: #72c5c1; --block-9: #a6d5cd;
}
:root[data-theme="forest"] {
  --theme-accent: #528448; --theme-bright: #a6d893; --theme-secondary: #d9a852;
  --block-1: #acd489; --block-2: #e4c780; --block-3: #8fc899;
  --block-4: #c2d88b; --block-5: #8ec6bc; --block-6: #a8c476;
  --block-7: #d6bc8c; --block-8: #91c79e; --block-9: #cbd799;
}
:root[data-theme="sunset"] {
  --theme-accent: #bb6354; --theme-bright: #ffb6a0; --theme-secondary: #dca338;
  --block-1: #f0ba7f; --block-2: #edab92; --block-3: #e9ce8b;
  --block-4: #e9a4b4; --block-5: #c7a4d6; --block-6: #f2c2a1;
  --block-7: #d99fc0; --block-8: #eeb686; --block-9: #e5cf8c;
}
:root[data-theme="candy"] {
  --theme-accent: #b7579e; --theme-bright: #f1a7df; --theme-secondary: #8aaedb;
  --block-1: #efa9d1; --block-2: #c2adeb; --block-3: #9cd5e2;
  --block-4: #e8a6ba; --block-5: #aaa5e9; --block-6: #aedccc;
  --block-7: #d3a8e3; --block-8: #f1c49e; --block-9: #e4b8dd;
}
@media screen {
  .brand-mark i { background: var(--theme-accent); }
  .brand-mark i:nth-child(2) { background: color-mix(in srgb, var(--theme-accent) 55%, #fff); }
  .brand-mark i:nth-child(3) { background: var(--theme-secondary); }
  .brand-mark i:nth-child(4) { background: var(--block-6); }
  .heading-spark, .doodle-one { color: var(--theme-secondary); }
  .number-column, .face { transition: background-color .22s, border-color .22s; }
  .column-heading {
    --column-heading-ink: color-mix(in srgb, var(--color) 55%, #253044);
    color: var(--column-heading-ink);
    transition: color .22s;
  }
}