:root {
  --wol-ink: #203F3B;
  --wol-ivory: #F5F1E7;
  --wol-water: #76AFB8;
  --wol-mist: #DCE7E3;
  --wol-font: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}
/* Semantic theme tokens. Set data-theme="light" or "dark" on <html>.
   With no attribute, follows the device preference. */
:root, :root[data-theme="light"] { color-scheme: light; --wol-bg:#F5F1E7; --wol-surface:#DCE7E3; --wol-text:#203F3B; --wol-muted:#46625C; --wol-accent:#315F66; --wol-border:#A6BBB4; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --wol-bg:#102825; --wol-surface:#203F3B; --wol-text:#F5F1E7; --wol-muted:#B6CDC6; --wol-accent:#8BC4CD; --wol-border:#46665F; } }
:root[data-theme="dark"] { color-scheme:dark; --wol-bg:#102825; --wol-surface:#203F3B; --wol-text:#F5F1E7; --wol-muted:#B6CDC6; --wol-accent:#8BC4CD; --wol-border:#46665F; }
.wol-symbol-surface { background:#F5F1E7; border-radius:24px; padding:16px; }