/* Shared colour tokens for the dark (default) and light themes.
   Every page loads this before its own stylesheet; /theme.js sets
   <html data-theme="light|dark"> before first paint. Stylesheets and
   server-rendered templates use these instead of hard-coded colours, so
   one switch flips the whole product. */
:root {
  color-scheme: dark;
  --gp-hair: 226, 245, 233;     /* rgb triplet: hairlines and borders, used as rgba(var(--gp-hair), a) */
  --gp-hair2: 255, 255, 255;    /* rgb triplet: faint dividers on cards */
  --gp-deep: 10, 20, 16;        /* rgb triplet: translucent panels and fields */
  --gp-bg: #060b09;
  --gp-bg-2: #081310;
  --gp-solid: #0a1410;
  --gp-text: #f4f9f5;
  --gp-text-2: #eaf3ec;
  --gp-text-3: #c3d0c7;
  --gp-text-4: #a9b8ad;
  --gp-muted: #93a89b;
  --gp-muted-2: #6e8579;
  --gp-link: #22c55e;
  --gp-danger-text: #ff6b6b;
  --gp-gold-text: #e8b04b;
  --gp-shadow-rgb: 0, 0, 0;
}
html[data-theme="light"] {
  color-scheme: light;
  --gp-hair: 6, 28, 23;
  --gp-hair2: 6, 28, 23;
  --gp-deep: 255, 255, 255;
  --gp-bg: #f4f1e8;
  --gp-bg-2: #ebe7da;
  --gp-solid: #ffffff;
  --gp-text: #0f1a16;
  --gp-text-2: #15241d;
  --gp-text-3: #2b3b33;
  --gp-text-4: #3b4c44;
  --gp-muted: #4d5f56;
  --gp-muted-2: #5c6d64;
  --gp-link: #15803d;
  --gp-danger-text: #b42318;
  --gp-gold-text: #8a5a0e;
  --gp-shadow-rgb: 6, 28, 23;
}

/* The theme switch (placed by /theme.js into whichever header the page has). */
.gp-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid rgba(var(--gp-hair), .18);
  background: rgba(var(--gp-deep), .55); color: var(--gp-text-2);
  transition: border-color .15s, background .15s;
}
.gp-theme-btn:hover { border-color: rgba(var(--gp-hair), .4); }
.gp-theme-btn:focus-visible { outline: 2px solid var(--gp-link); outline-offset: 2px; }
.gp-theme-btn svg { width: 16px; height: 16px; display: block; }
.gp-theme-btn.floating { position: fixed; top: 14px; right: 14px; z-index: 70; }
