/* Cosmic backdrop shared by every public surface.
   Two fixed layers behind the page: a nebula (::before) and a starfield (::after).
   Both are pure gradients on purpose — no image file to fetch, so a page still
   paints identically with the network switched off.

   Theming: each theme redefines the whole layer as one custom property. Holding
   the entire gradient list in a variable (instead of one variable per colour
   stop) keeps per-star alpha exact, which a single colour token cannot express.

   Connect a page with one line in <head>:
     <link rel="stylesheet" href="./src/shared/cosmos.css">
   Default is the night theme. A different theme is one attribute on <html>:
     <html data-cosmos="kids">  (or mountCosmos("kids") from cosmos.js) */

:root {
  --cosmos-nebula:
    radial-gradient(1100px 620px at 12% -6%, rgb(103 232 249 / 16%), transparent 62%),
    radial-gradient(900px 560px at 88% 4%, rgb(255 62 165 / 12%), transparent 60%),
    radial-gradient(1200px 900px at 50% 108%, rgb(120 140 255 / 12%), transparent 64%);
  --cosmos-stars:
    radial-gradient(1.2px 1.2px at 18% 22%, rgb(255 255 255 / 62%), transparent 100%),
    radial-gradient(1px 1px at 72% 12%, rgb(255 255 255 / 48%), transparent 100%),
    radial-gradient(1.4px 1.4px at 42% 68%, rgb(255 255 255 / 40%), transparent 100%),
    radial-gradient(1px 1px at 88% 54%, rgb(255 255 255 / 44%), transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 76%, rgb(255 255 255 / 34%), transparent 100%),
    radial-gradient(1px 1px at 62% 88%, rgb(255 255 255 / 38%), transparent 100%);
  --cosmos-star-opacity: 0.5;
}

/* Child mode: the same sky, warmer and softer. Blue over pink, wider and lower
   contrast, so a screen a child looks at for a long time stays calm. */
[data-cosmos="kids"] {
  --cosmos-nebula:
    radial-gradient(1200px 700px at 14% -8%, rgb(125 211 252 / 30%), transparent 64%),
    radial-gradient(1000px 640px at 86% 2%, rgb(249 168 212 / 26%), transparent 62%),
    radial-gradient(1300px 980px at 50% 106%, rgb(196 181 253 / 22%), transparent 66%);
  --cosmos-stars:
    radial-gradient(1.6px 1.6px at 18% 22%, rgb(255 255 255 / 78%), transparent 100%),
    radial-gradient(1.3px 1.3px at 72% 12%, rgb(255 241 250 / 66%), transparent 100%),
    radial-gradient(1.8px 1.8px at 42% 68%, rgb(236 250 255 / 58%), transparent 100%),
    radial-gradient(1.3px 1.3px at 88% 54%, rgb(255 255 255 / 60%), transparent 100%),
    radial-gradient(1.6px 1.6px at 8% 76%, rgb(255 241 250 / 52%), transparent 100%),
    radial-gradient(1.3px 1.3px at 62% 88%, rgb(236 250 255 / 56%), transparent 100%);
  --cosmos-star-opacity: 0.62;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--cosmos-nebula);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: var(--cosmos-star-opacity);
  background-image: var(--cosmos-stars);
}