/* ===================================================================
   RIVET · Main-colour & liquid-glass tokens
   -------------------------------------------------------------------
   MAIN-COLOUR LAW (founder ruling, supersedes prior guidance):
   the MAIN colour is mode-bound; the ACCENT is Hot Magenta in BOTH modes.
     • LIGHT (membership / community)   → main = Vivid Purple  · accent = Magenta
     • DARK  (corporate / professional) → main = Vivid Cyan    · accent = Magenta
   Focus rings stay Vivid Purple in both modes (see colors.css).
   Use --rivet-primary for the dominant colour (eyebrows, links, key marks,
   the "science" grid tint) and reserve --rivet-accent (magenta) for the ONE
   precious accent moment per surface.
   =================================================================== */

:root { /* dark anchor */
  --rivet-primary: var(--rivet-cyan);
}
.rivet-light, [data-mode="light"] {
  --rivet-primary: var(--rivet-purple);
}
.rivet-dark, [data-mode="dark"] {
  --rivet-primary: var(--rivet-cyan);
}

/* ---- Liquid glass (Apple-style) — nav bars & floating chrome only ---- */
:root {
  --rivet-glass-bg:   color-mix(in srgb, var(--rivet-black) 55%, transparent); /* @kind color */
  --rivet-glass-blur: 14px;
}
.rivet-light, [data-mode="light"] {
  --rivet-glass-bg:   color-mix(in srgb, #FFFFFF 72%, transparent); /* @kind color */
}
.rivet-dark, [data-mode="dark"] {
  --rivet-glass-bg:   color-mix(in srgb, var(--rivet-black) 55%, transparent); /* @kind color */
}