/* The colours and the spacing unit every pulpme.sh page is built from.
   deploy.sh installs this into the public root; the landing template, the
   help page and the legal page all link it.

   Spacing is a multiple of 6px, the pixel unit the wordmark is drawn on. */

:root {
  color-scheme: light dark;

  --u: 6px;

  --bg: #fbfaf7;
  --fg: #1c1b19;
  --dim: #6d6a63;
  --rule: #e0ddd4;
  --accent: #047c48;
  --code-bg: #f1eee6;
  --logo-adjust: brightness(0.86) saturate(1.15);

  /* The twelve hues of the wordmark, in the order they run across it.
     A section takes the next one for the pixel beside its label. On this
     background eight of them are darkened to hold their own against paper;
     the wordmark itself keeps the originals. */
  --spectrum-red: #ff2828;
  --spectrum-orange: #e96d00;
  --spectrum-amber: #be860d;
  --spectrum-yellow: #a78f08;
  --spectrum-citron: #859b0d;
  --spectrum-lime: #4ca404;
  --spectrum-green: #01a832;
  --spectrum-spring: #0da567;
  --spectrum-cyan: #139dc7;
  --spectrum-blue: #0078ff;
  --spectrum-violet: #7850ff;
  --spectrum-magenta: #ff00c8;
}

/* Night is its own palette rather than an inversion, and the twelve hues
   are bright enough against it to be used as they are drawn. The same
   values are set twice: once for the reader whose system asks for dark,
   and once for a page that carries data-theme="dark" itself. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0f;
    --fg: #e8e6e1;
    --dim: #8b8880;
    --rule: #24242a;
    --accent: #35d68a;
    --code-bg: #17171b;
    --logo-adjust: none;

    --spectrum-orange: #ff7800;
    --spectrum-amber: #ffb400;
    --spectrum-yellow: #ffdc00;
    --spectrum-citron: #dcff00;
    --spectrum-lime: #78ff00;
    --spectrum-green: #00ff50;
    --spectrum-spring: #00ffa0;
    --spectrum-cyan: #00c8ff;
  }
}

:root[data-theme="dark"] {
  --bg: #0d0d0f;
  --fg: #e8e6e1;
  --dim: #8b8880;
  --rule: #24242a;
  --accent: #35d68a;
  --code-bg: #17171b;
  --logo-adjust: none;

  --spectrum-orange: #ff7800;
  --spectrum-amber: #ffb400;
  --spectrum-yellow: #ffdc00;
  --spectrum-citron: #dcff00;
  --spectrum-lime: #78ff00;
  --spectrum-green: #00ff50;
  --spectrum-spring: #00ffa0;
  --spectrum-cyan: #00c8ff;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }