/* Savage Science Tools — skin for the dark "glass" tools.
   Load after sst.css on pages built from the shared glass template
   (.glass / .glass-soft panels, .viewport / .stage canvases, Tailwind
   font-sans / font-display). It flattens them onto the site palette: solid
   navy surfaces, one hairline border colour, Plus Jakarta Sans, and no
   gradients, blur or drop shadows. Colours inside diagrams are left alone. */

html, body {
  background: var(--sst-bg) !important;
  background-image: none !important;
}
body {
  color: var(--sst-text);
  font-family: var(--sst-font) !important;
}
.font-sans, .font-display { font-family: var(--sst-font) !important; }
.font-display { letter-spacing: -0.01em; }

.glass {
  background: var(--sst-panel) !important;
  border-color: var(--sst-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.glass-soft {
  background: var(--sst-card) !important;
  border-color: var(--sst-line) !important;
}
.viewport, .stage { background: var(--sst-stage) !important; }

/* ---------- Light theme ----------
   In light mode (.theme-light, the site bar's Light / Dark toggle) the glass
   template's own pieces go light here, then the Tailwind dark-theme utilities
   the glass tools use are repainted below: navy surfaces become the light
   panel scale, pale text becomes ink, pale accents take their -700 / -800
   shades, and white hairlines become ink hairlines. Solid colour buttons keep
   their white text. Screen only, so printed worksheets are untouched. */
@media screen {
  /* Arbitrary navy fills (bg-[#070b12]/75) and gradient stages. */
  .theme-light :is([class*="bg-[#0"], [class*="bg-[#1"]) { background-color: var(--sst-panel); }
  .theme-light [class*="bg-[radial-gradient"], .theme-light [class*="bg-[linear-gradient"] { background-image: none; background-color: var(--sst-stage); }
  /* The template's hand-styled range sliders and scrollbars. */
  .theme-light input[type=range]::-webkit-slider-runnable-track { background: rgba(20,32,48,.16); }
  .theme-light input[type=range]::-moz-range-track { background: rgba(20,32,48,.16); }
  .theme-light input[type=range]::-webkit-slider-thumb { border-color: #ffffff; }
  .theme-light input[type=range]::-moz-range-thumb { border-color: #ffffff; }
  .theme-light ::-webkit-scrollbar-thumb { background: rgba(20,32,48,.2); }
  .theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(20,32,48,.32); }
}

/* Generated from the classes in the glass tools (aromatic-benzene-
   delocalisation, labsketch-apparatus-drawer, organic-reaction-mechanisms,
   shapes-of-simple-molecules, waves-required-practical). A tool that starts
   using another dark utility needs its light shade adding here. */
@media screen {
  .theme-light .text-amber-100 { color: #92400e; }
  .theme-light .text-amber-100\/70 { color: #92400e; }
  .theme-light .text-amber-200 { color: #92400e; }
  .theme-light .text-amber-200\/90 { color: #92400e; }
  .theme-light .text-amber-300 { color: #b45309; }
  .theme-light .text-amber-300\/80 { color: #b45309; }
  .theme-light .text-amber-400 { color: #b45309; }
  .theme-light .text-amber-50 { color: #92400e; }
  .theme-light .text-cyan-100 { color: #155e75; }
  .theme-light .text-cyan-200 { color: #155e75; }
  .theme-light .text-cyan-200\/80 { color: #155e75; }
  .theme-light .text-cyan-200\/90 { color: #155e75; }
  .theme-light .text-cyan-300 { color: #0e7490; }
  .theme-light .text-cyan-400 { color: #0e7490; }
  .theme-light .text-emerald-100 { color: #065f46; }
  .theme-light .text-emerald-200 { color: #065f46; }
  .theme-light .text-emerald-200\/80 { color: #065f46; }
  .theme-light .text-emerald-300 { color: #047857; }
  .theme-light .text-emerald-400 { color: #047857; }
  .theme-light .text-emerald-50 { color: #065f46; }
  .theme-light .text-indigo-200 { color: #3730a3; }
  .theme-light .text-indigo-300 { color: #4338ca; }
  .theme-light .text-indigo-400 { color: #4338ca; }
  .theme-light .text-rose-100 { color: #9f1239; }
  .theme-light .text-rose-200 { color: #9f1239; }
  .theme-light .text-rose-200\/90 { color: #9f1239; }
  .theme-light .text-rose-300 { color: #be123c; }
  .theme-light .text-rose-400 { color: #be123c; }
  .theme-light .text-sky-100 { color: #075985; }
  .theme-light .text-sky-200 { color: #075985; }
  .theme-light .text-sky-300 { color: #0369a1; }
  .theme-light .text-sky-300\/90 { color: #0369a1; }
  .theme-light .text-slate-100 { color: #142030; }
  .theme-light .text-slate-200 { color: #142030; }
  .theme-light .text-slate-300 { color: #354150; }
  .theme-light .text-slate-400 { color: #4c5868; }
  .theme-light .text-slate-400\/80 { color: #4c5868; }
  .theme-light .text-slate-50 { color: #142030; }
  .theme-light .text-slate-500 { color: #596473; }
  .theme-light .text-teal-300 { color: #0f766e; }
  .theme-light .text-violet-100 { color: #5b21b6; }
  .theme-light .text-violet-200 { color: #5b21b6; }
  .theme-light .text-violet-300 { color: #6d28d9; }
  .theme-light .text-white { color: #142030; }
  .theme-light .text-zinc-100 { color: #142030; }
  .theme-light .text-zinc-200 { color: #142030; }
  .theme-light .text-zinc-300 { color: #354150; }
  .theme-light .text-zinc-400 { color: #4c5868; }
  .theme-light .text-zinc-500 { color: #596473; }
  .theme-light .group:hover .group-hover\:text-white { color: #142030; }
  .theme-light .hover\:text-cyan-200:hover { color: #155e75; }
  .theme-light .hover\:text-rose-300:hover { color: #be123c; }
  .theme-light .hover\:text-slate-200:hover { color: #142030; }
  .theme-light .hover\:text-white:hover { color: #142030; }
  .theme-light .hover\:text-zinc-200:hover { color: #142030; }
  .theme-light .placeholder\:text-slate-500::placeholder { color: #8693a5; }
  .theme-light .bg-amber-950\/80 { background-color: #fffbeb; }
  .theme-light .bg-black\/20 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-black\/25 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-black\/30 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-black\/35 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-black\/40 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-black\/45 { background-color: rgba(20,32,48,.05); }
  .theme-light .bg-cyan-950\/80 { background-color: #ecfeff; }
  .theme-light .bg-slate-600 { background-color: #d5dbe3; }
  .theme-light .bg-slate-600\/70 { background-color: #d5dbe3; }
  .theme-light .bg-slate-700 { background-color: #e8edf3; }
  .theme-light .bg-slate-700\/70 { background-color: #e8edf3; }
  .theme-light .bg-slate-800\/80 { background-color: #ffffff; }
  .theme-light .bg-slate-900 { background-color: #f8fafd; }
  .theme-light .bg-slate-900\/40 { background-color: #f8fafd; }
  .theme-light .bg-slate-900\/60 { background-color: #f8fafd; }
  .theme-light .bg-slate-900\/70 { background-color: #f8fafd; }
  .theme-light .bg-slate-900\/85 { background-color: #f8fafd; }
  .theme-light .bg-slate-950 { background-color: #f1f5f8; }
  .theme-light .bg-slate-950\/70 { background-color: #f1f5f8; }
  .theme-light .bg-white\/10 { background-color: rgba(20,32,48,.06); }
  .theme-light .bg-white\/20 { background-color: rgba(20,32,48,.1); }
  .theme-light .bg-white\/5 { background-color: rgba(20,32,48,.035); }
  .theme-light .bg-zinc-700 { background-color: #e8edf3; }
  .theme-light .bg-zinc-800 { background-color: #ffffff; }
  .theme-light .bg-zinc-800\/40 { background-color: #ffffff; }
  .theme-light .bg-zinc-800\/60 { background-color: #ffffff; }
  .theme-light .bg-zinc-800\/70 { background-color: #ffffff; }
  .theme-light .bg-zinc-900 { background-color: #f8fafd; }
  .theme-light .hover\:bg-slate-600:hover { background-color: #d5dbe3; }
  .theme-light .hover\:bg-white\/10:hover { background-color: rgba(20,32,48,.06); }
  .theme-light .hover\:bg-white\/40:hover { background-color: rgba(20,32,48,.14); }
  .theme-light .hover\:bg-white\/5:hover { background-color: rgba(20,32,48,.035); }
  .theme-light .hover\:bg-zinc-700:hover { background-color: #e8edf3; }
  .theme-light .hover\:bg-zinc-800:hover { background-color: #ffffff; }
  .theme-light .hover\:bg-zinc-800\/40:hover { background-color: #ffffff; }
  .theme-light .border-slate-400\/30 { border-color: #b5bfc9; }
  .theme-light .border-slate-400\/50 { border-color: #b5bfc9; }
  .theme-light .border-slate-500 { border-color: #9aa8b8; }
  .theme-light .border-slate-600 { border-color: #b5bfc9; }
  .theme-light .border-slate-700 { border-color: #d5dbe3; }
  .theme-light .border-slate-700\/70 { border-color: #d5dbe3; }
  .theme-light .border-slate-700\/80 { border-color: #d5dbe3; }
  .theme-light .border-slate-800 { border-color: #d5dbe3; }
  .theme-light .border-white { border-color: #142030; }
  .theme-light .border-white\/10 { border-color: rgba(20,32,48,0.15); }
  .theme-light .border-white\/12 { border-color: rgba(20,32,48,0.16); }
  .theme-light .border-white\/15 { border-color: rgba(20,32,48,0.18); }
  .theme-light .border-white\/25 { border-color: rgba(20,32,48,0.26); }
  .theme-light .border-white\/5 { border-color: rgba(20,32,48,0.12); }
  .theme-light .border-zinc-700 { border-color: #d5dbe3; }
  .theme-light .border-zinc-800 { border-color: #d5dbe3; }
  .theme-light .hover\:border-slate-500:hover { border-color: #9aa8b8; }
  .theme-light .hover\:border-white\/20:hover { border-color: rgba(20,32,48,0.22); }
  .theme-light .hover\:border-white\/25:hover { border-color: rgba(20,32,48,0.26); }
  .theme-light .hover\:border-white\/30:hover { border-color: rgba(20,32,48,0.29); }
  .theme-light .hover\:border-white\/35:hover { border-color: rgba(20,32,48,0.33); }
  .theme-light .hover\:border-zinc-500:hover { border-color: #9aa8b8; }
  .theme-light .ring-white\/25 { --tw-ring-color: rgba(20,32,48,.25); }
  .theme-light :is(.bg-amber-500, .bg-cyan-400, .bg-cyan-500, .bg-emerald-400, .bg-emerald-500, .bg-indigo-600, .bg-rose-500, .bg-sky-400, .bg-sky-500, .bg-violet-400, .bg-violet-500).text-white,
  .theme-light :is(.bg-amber-500, .bg-cyan-400, .bg-cyan-500, .bg-emerald-400, .bg-emerald-500, .bg-indigo-600, .bg-rose-500, .bg-sky-400, .bg-sky-500, .bg-violet-400, .bg-violet-500) .text-white { color: #fff; }
  .theme-light :is(.bg-amber-500, .bg-cyan-400, .bg-cyan-500, .bg-emerald-400, .bg-emerald-500, .bg-indigo-600, .bg-rose-500, .bg-sky-400, .bg-sky-500, .bg-violet-400, .bg-violet-500) :is(.text-amber-100, .text-amber-100\/70, .text-amber-200, .text-amber-200\/90, .text-amber-300, .text-amber-300\/80, .text-amber-50, .text-cyan-100, .text-cyan-200, .text-cyan-200\/80, .text-cyan-200\/90, .text-cyan-300, .text-emerald-100, .text-emerald-200, .text-emerald-200\/80, .text-emerald-300, .text-emerald-50, .text-indigo-200, .text-indigo-300, .text-rose-100, .text-rose-200, .text-rose-200\/90, .text-rose-300, .text-sky-100, .text-sky-200, .text-sky-300, .text-sky-300\/90, .text-teal-300, .text-violet-100, .text-violet-200, .text-violet-300) { color: rgba(255,255,255,.85); }
}