/* SurveyStream — background pattern
 * Seamless 400×400 tile, drawn twice: once for dark grounds, once for light.
 * Both are pixel-periodic with zero boundary discontinuity — see README.md.
 *
 * The light tile is NOT an inversion. On dark the accents are additive, so a
 * bright stroke over near-black reads as glow; invert that and the halo becomes
 * a smudge. The light tile moves the accents to the deep end of the palette
 * (Current, Pulse-deep), thins the glow layers to 62%, and flips the grid to
 * slate. Same geometry, different ink.
 *
 * Paths are relative to this file, so keep pattern.css alongside the tiles.
 *
 * Two ways to use it:
 *   1. Reference the files      background-image: url("pattern/tile-brand-400.svg");
 *   2. The classes below        theme-aware, swaps ground + tile for you
 *
 * Prefer (1) in production — the SVG gzips to 1.8 KB as a file, while the same
 * tile percent-encoded inside a stylesheet is 12.3 KB raw and compresses far
 * worse, because URI escaping destroys the repetition gzip feeds on.
 */

/* ---- light is the bare :root default ---- */
:root {
  --ss-pattern-ground: #F4F8F9;
  --ss-pattern:        url("./tile-brand-400-light.svg");
  --ss-pattern-subtle: url("./tile-brand-400-light-subtle.svg");

  --ss-pattern-size: 400px 400px;
}

/* ---- system dark, unless an explicit light choice overrides it ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ss-pattern-ground: #04171F;
    --ss-pattern:        url("./tile-brand-400.svg");
    --ss-pattern-subtle: url("./tile-brand-400-subtle.svg");
  }
}

/* ---- explicit dark wins in both directions ---- */
:root[data-theme="dark"] {
  --ss-pattern-ground: #04171F;
  --ss-pattern:        url("./tile-brand-400.svg");
  --ss-pattern-subtle: url("./tile-brand-400-subtle.svg");
}

/* ---- explicit light ---- */
:root[data-theme="light"] {
  --ss-pattern-ground: #F4F8F9;
  --ss-pattern:        url("./tile-brand-400-light.svg");
  --ss-pattern-subtle: url("./tile-brand-400-light-subtle.svg");
}

/* Full strength — hero bands, empty states, login screens. */
.ss-bg {
  background-color: var(--ss-pattern-ground);
  background-image: var(--ss-pattern);
  background-size: var(--ss-pattern-size);
  background-repeat: repeat;
}

/* Half strength — anywhere text sits on top. */
.ss-bg-subtle {
  background-color: var(--ss-pattern-ground);
  background-image: var(--ss-pattern-subtle);
  background-size: var(--ss-pattern-size);
  background-repeat: repeat;
}

/* Pin one ground regardless of theme — for a section that is always dark. */
.ss-bg--force-dark {
  background-color: #04171F;
  background-image: url("./tile-brand-400.svg");
  background-size: var(--ss-pattern-size);
  background-repeat: repeat;
}
.ss-bg--force-light {
  background-color: #F4F8F9;
  background-image: url("./tile-brand-400-light.svg");
  background-size: var(--ss-pattern-size);
  background-repeat: repeat;
}

/* Scaling the tile is fine — it is vector. Halving reads denser, not blurrier. */
.ss-bg--dense { background-size: 200px 200px; }
.ss-bg--wide  { background-size: 640px 640px; }

/* Respect reduced motion if you animate background-position. */
@media (prefers-reduced-motion: reduce) {
  .ss-bg-drift { animation: none !important; }
}

/* Optional ambient drift. 400px per cycle keeps the loop invisible, because the
   tile is exactly 400px — any other distance shows a jump. */
@keyframes ss-drift { from { background-position: 0 0; } to { background-position: 400px 0; } }
.ss-bg-drift { animation: ss-drift 60s linear infinite; }