/* Light and dark theme. Pages open light whatever the system says; the nav
   button flips to dark for the current page only (nothing is stored). Inline colours of the prototype
   pages are matched by value, so they need !important to change. */

:root {
  color-scheme: light;
  --page: #F3F1F0;
  --surface: #FFFFFF;
  --soft: #F3F1F0;
  --soft-2: #F8F7F6;
  --line: #EBE7E4;
  --line-2: #DDD8D5;
  --ink: #1A1A1A;
  --ink-hover: #000000;
  --on-ink: #FFFFFF;
  --text: #3D3936;
  --ink-2: #4A4643;
  --ink-3: #565150;
  --ink-4: #6F6A67;
  --ink-5: #8A8582;
  --faint: #E9E4E1;
  --night: #141414;
  --night-2: #1F1F1F;
  --night-3: #262626;
  --link-hover: #8A7A05;
  --logo-light: block;
  --logo-dark: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #121110;
  --surface: #1C1A19;
  --soft: #262321;
  --soft-2: #24211F;
  --line: #33302D;
  --line-2: #423E3B;
  --ink: #EDEAE7;
  --ink-hover: #FFFFFF;
  --on-ink: #121110;
  --text: #CFC9C5;
  --ink-2: #D2CCC8;
  --ink-3: #BDB7B3;
  --ink-4: #A39D99;
  --ink-5: #8F8986;
  --faint: #3A3633;
  --night: #2A2725;
  --night-2: #34302E;
  --night-3: #3B3734;
  --link-hover: #F7E112;
  --logo-light: none;
  --logo-dark: block;
}

html, body { background: var(--page); }

.logo-light { display: var(--logo-light); }
.logo-dark { display: var(--logo-dark); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--ink); }

svg [fill="#1A1A1A"] { fill: var(--ink); }
svg [stroke="#1A1A1A"] { stroke: var(--ink); }

[style*="background: rgb(243, 241, 240)"] { background: var(--page) !important; }
[style*="background: rgb(255, 255, 255)"] { background: var(--surface) !important; }
[style*="background: rgb(250, 248, 247)"] { background: var(--soft-2) !important; }
[style*="background: rgb(240, 237, 234)"] { background: var(--soft) !important; }
[style*="background: rgb(20, 20, 20)"] { background: var(--night) !important; }
[style*="background: rgb(31, 31, 31)"] { background: var(--night-2) !important; }
[style*="background: rgb(38, 38, 38)"] { background: var(--night-3) !important; }

[style*="color: rgb(26, 26, 26)"] { color: var(--ink) !important; }
[style*="color: rgb(74, 70, 67)"] { color: var(--ink-2) !important; }
[style*="color: rgb(86, 81, 80)"] { color: var(--ink-3) !important; }
[style*="color: rgb(95, 90, 87)"] { color: var(--ink-3) !important; }
[style*="color: rgb(111, 106, 103)"] { color: var(--ink-4) !important; }
[style*="color: rgb(122, 117, 112)"] { color: var(--ink-4) !important; }
[style*="color: rgb(138, 133, 130)"] { color: var(--ink-5) !important; }
[style*="color: rgb(233, 228, 225)"] { color: var(--faint) !important; }

[style*="solid rgb(235, 231, 228)"],
[style*="solid rgb(230, 226, 224)"] { border-color: var(--line) !important; }
[style*="solid rgb(221, 216, 213)"] { border-color: var(--line-2) !important; }

[style*="background: rgb(26, 26, 26)"] { background: var(--ink) !important; color: var(--on-ink) !important; }

/* .cta-primary:hover turns the button black; a light button with dark text would vanish. */
.cta-primary[style*="background: rgb(247, 225, 18)"]:hover { background: #F7E112 !important; filter: brightness(0.94); }
.cta-primary[style*="background: rgb(255, 255, 255)"]:hover { background: var(--surface) !important; box-shadow: inset 0 0 0 2px var(--ink); }
[style*="background: rgb(247, 225, 18)"] { color: #1A1A1A !important; }