/* Design tokens shared by every real HTML workshop. No screenshot overlays. */
:root {
  color-scheme: dark;
  --danger: #ff9390;
  --success: #68e4b3;
  --radius: 18px;
  --world: url('./assets/home/alpine-lake.webp');
  --banner: url('./assets/home/alpine-lake.webp');
  --hub: url('./assets/home/alpine-lake.webp');
  --world-opacity: 1;
  --headline: Arial,Helvetica,sans-serif;
  --side: 184px;
  --top: 78px;
}
[data-theme="nebuleuse"] { --world-opacity: .35; }
[data-theme="aurore"] {
  --world: url('./studio-assets/themes/aurore.webp');
  --banner: url('./assets/aurore/image-thumb.webp');
  --hub: url('./assets/aurore/hub.webp');
}
[data-theme="crepuscule"] {
  --world: url('./studio-assets/themes/crepuscule.webp');
  --banner: url('./assets/crepuscule/image-thumb.webp');
  --hub: url('./assets/crepuscule/hub.webp');
}
[data-theme="blanc"] {
  color-scheme: light;
  /* Keep white button labels readable across the entire gradient. */
  --world: url('./studio-assets/themes/blanc.webp');
  --banner: url('./assets/blanc/image-thumb.webp');
  --hub: url('./assets/blanc/hub.webp');
  --danger: #ba373e;
  --success: #21734b;
}
[data-theme="ivoire"] {
  color-scheme: light;
  --world: url('./studio-assets/themes/ivoire.webp');
  --banner: url('./assets/ivoire/chat-thumb.webp');
  --hub: url('./assets/ivoire/chat-thumb.webp');
  --headline: Georgia,serif;
  --danger: #b64438;
  --success: #517245;
}
[data-theme="studio-dark"] {
  --world: none;
  --banner: none;
  --hub: none;
  --radius: 12px;
  --danger: #eda09a;
  --success: #afc998;
}
[data-theme="studio-light"] {
  color-scheme: light;
  --world: none;
  --banner: none;
  --hub: none;
  --radius: 12px;
  --danger: #b03a39;
  --success: #497640;
}