/* glow.css — the violet light, and nothing else.
 *
 * Loaded AFTER every page's own stylesheet, on every page, so the dose lives in ONE file and can
 * be turned down or removed in one edit. Nothing in here changes layout, spacing or type.
 *
 * The rule this file obeys: violet is a LIGHT SOURCE, never a surface. It appears as a bloom at
 * the foot of the page, as the ring around whatever has focus, as the colour of selected text,
 * and as a halo on the one button that matters. It is never a fill, never a border, never text.
 * The site stays black and white; the light just falls on it.
 *
 * Same value as the foot of the mark's gradient, so page and icon are lit by the same lamp.
 *
 * NOT touched on purpose: style.css's --accent (#b39ddb). Its own comment says it is replaced at
 * runtime from user settings — hard-coding it here would override a choice that belongs to the
 * person using the product.
 */

:root {
  --zl-violet: #8f7ac9;
  --zl-glow: rgba(143, 122, 201, .13);       /* the ambient bloom */
  --zl-glow-edge: rgba(143, 122, 201, .26);  /* light catching an edge */
  --zl-ring: rgba(143, 122, 201, .70);       /* focus */
  --zl-select: rgba(143, 122, 201, .32);     /* selected text */
}

/* ---------- 1. one lamp, low and mostly off-page ----------------------------------------- */
/* Attached to the elements that actually PAINT the background. A fixed overlay would either sit
   above the text or be covered by the opaque page colour; an extra background layer cannot. */

/* .hp already carries the drawing grid — it is repeated here because background-image is a
   shorthand list and dropping it would take the grid with it. */
.hp {
  background-image:
    radial-gradient(72% 46% at 50% 104%, var(--zl-glow) 0%, transparent 70%),
    radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
}

/* .ds (docs shell, pricing, 404) and .dk (a docs page) paint a flat colour and nothing else. */
.ds, .dk {
  background-image: radial-gradient(72% 40% at 50% 104%, var(--zl-glow) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- 2. focus ---------------------------------------------------------------------- */
/* Only the COLOUR is set. Each page already decided its own ring width and offset — .ds uses
   offset 2, .hp-skip uses -6 — and overwriting the shorthand would undo those decisions.
   Same specificity as the rules being tinted, so source order decides, and this file is last. */
.hp :focus-visible,
.ds :focus-visible,
.dk :focus-visible,
body :focus-visible {
  outline-color: var(--zl-ring);
}

/* ---------- 3. selection ------------------------------------------------------------------ */
/* Was a hard invert (white block, black text). The violet keeps the text legible while finally
   giving the selection the same colour as everything else that lights up. */
::selection { background: var(--zl-select); color: #fff; }
.hp ::selection,
.ds ::selection,
.dk ::selection { background: var(--zl-select); color: #fff; }

/* ---------- 4. the one button that matters ------------------------------------------------ */
/* The call to action already inverts on hover to a white block. The halo makes that block look
   lit rather than merely filled. Nothing else on the page gets a shadow. */
.hp-btn:hover,
.hp-btn:focus-visible {
  box-shadow: 0 0 0 1px var(--zl-glow-edge), 0 10px 34px -10px var(--zl-glow-edge);
}

/* ---------- print -------------------------------------------------------------------------- */
/* A bloom is light. On paper it is a grey smear. */
@media print {
  .hp, .ds, .dk { background-image: none; }
  .hp-btn:hover, .hp-btn:focus-visible { box-shadow: none; }
}