/* Vivid on senserva.com: the token bridge.
   -------------------------------------------------------------------------
   Mark, 2026-08-06: "bring vivid in to senserva.com ... make it fit in nice."

   Vivid controls contain NO HEX, ever. Every colour they use comes from a
   --vv-* custom property, which is exactly what lets the same control code run
   on Julian's light coastal site and on this dark one and look like it was
   drawn for each. This file is the whole of senserva.com's side of that
   contract: it maps our existing palette onto Vivid's tokens.

   SO THE RULE HERE IS: no new colours. Every value below is a var() pointing at
   a variable site-chrome.css already defines. If a Vivid control ever looks
   wrong on this site, the fix is a mapping in this file, never a hex inside a
   control, and never a new brand colour invented here.

   The tokens Vivid asks for, and why each is pointed where it is:

     --vv-ink          body text            -> --text
     --vv-ink-soft     secondary text       -> --text-dim
     --vv-line         hairlines, borders   -> --border
     --vv-surface      a card's own ground  -> --bg-card
     --vv-surface-alt  the shade beside it  -> --bg-card-alt
     --vv-deep         the page behind      -> --bg
     --vv-accent       the actionable one   -> --green

   --vv-accent is the Senserva green rather than the blue or the cyan, because
   on this site green is the brand and the action colour: it is what a button,
   a live link and a healthy state already wear. Cyan is the link/info accent
   and is deliberately NOT the Vivid accent, or every Vivid control would read
   as informational rather than actionable.

   Note on green: solid, at full strength. Never soften it to an rgba wash on a
   content surface, which is a standing site rule because a translucent green
   reads as dirty. Vivid controls use the accent for rules, marks and type
   rather than as a background fill, so they honour that by construction. */

:root {
    --vv-ink: var(--text);
    --vv-ink-soft: var(--text-dim);
    --vv-line: var(--border);
    --vv-surface: var(--bg-card);
    --vv-surface-alt: var(--bg-card-alt);
    --vv-deep: var(--bg);
    --vv-accent: var(--green);
    /* Geometry follows the site's own radius so a Vivid card and a Senserva
       card sitting side by side have the same corners. */
    --vv-radius: var(--radius, 12px);
    /* Layout knobs: the minimum a card may shrink to before the grid rewraps,
       and the width of a rail slide. Both sized against this site's content
       column rather than inherited from a tenant. */
    --vv-card-min: 280px;
    --vv-slide-w: 360px;
}

/* The "Powered by Senserva Vivid" mark in the footer. Quiet on purpose: it is
   an attribution, not a promotion, so it sits at footer-note size in the dim
   text colour and only picks up the brand green on hover. */
.sen-vivid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-dim);
    text-decoration: none;
}
.sen-vivid:hover { color: var(--green); }
.sen-vivid svg { flex: 0 0 auto; }