/*
  Shared Mercor Wealth dot field — the no-WebGL stand-in for the Living
  Field (field.js removes it when the canvas is live).
  The grid is deliberately stationary and viewport-centered so every route
  renders the same symmetric dot placement.
  Tokens are scoped on .field (not :root) so this file never becomes a
  token namespace of its own.
  The !importants stand guard against page-local backgrounds until each
  page migrates.

  THE LITERAL GRADIENT SHIPS FIRST, and the tokenised one overrides it
  under @supports. A custom property will happily HOLD an unsupported
  color-mix(), but substituting it makes the background-image invalid at
  computed-value time — which does not fall back to the previous value of
  that declaration, it drops the background entirely. The two public pages
  (index.html, goodbye.html) do not load tokens.css and would be left with
  no field at all. `#c0bdb8` inside the mix only covers an undefined
  --mw-stone; it is not a fallback for an unsupported function.
*/
.field {
  --mw-field-pitch: 46px;
  --mw-field-dot: 1.1px;
  /* Stone at 16% — the exact colour the mix below resolves to. */
  background-image: radial-gradient(circle at center, rgba(192, 189, 184, 0.16) var(--mw-field-dot), transparent var(--mw-field-dot)) !important;
  background-size: var(--mw-field-pitch) var(--mw-field-pitch) !important;
  background-position: center center !important;
  background-repeat: repeat !important;
  animation: none !important;
}

html.dark .field {
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) var(--mw-field-dot), transparent var(--mw-field-dot)) !important;
}

/* Where color-mix() is understood, the dot takes its ink from the live
   Stone token instead of a copied literal, so a change to the ladder
   carries here too. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .field {
    --mw-field-ink: color-mix(in srgb, var(--mw-stone, #c0bdb8) 16%, transparent);
    background-image: radial-gradient(circle at center, var(--mw-field-ink) var(--mw-field-dot), transparent var(--mw-field-dot)) !important;
  }
  html.dark .field {
    --mw-field-ink: rgba(255, 255, 255, 0.03);
    background-image: radial-gradient(circle at center, var(--mw-field-ink) var(--mw-field-dot), transparent var(--mw-field-dot)) !important;
  }
}

/* When the Living Field (field.js) is running, the static grid stands
   down — declared LAST and at the same specificity strength as the rules
   above, or the !importants would keep both fields alive and the dots
   would double. */
html.mw-field-live .field {
  background-image: none !important;
}