/* ═══════════════════════════════════════════════════════════════════════════
   FLUIDTALK — the product layer over the Fluid system
   ───────────────────────────────────────────────────────────────────────────
   Loads AFTER fg.css and overrides exactly one thing: the accent.

   WHY MINT AND NOT THE SYSTEM VIOLET.
   The Fluid family shares a silhouette (the drop) and gives each product its
   own hue — FluidGhost violet, FluidTalk mint. The mark in icons/icon.svg is
   already the mint gradient, and the FluidExtension side panel this page sells
   is already built on it (see fluid-design-system/applied-example). A violet
   site in front of a mint product is the "two accents" failure the brand skill
   warns about, just split across the funnel instead of across a page.

   WHAT IS NOT OVERRIDDEN: ground, ink, spacing, radii, type. Those are the
   system and stay the system.

   CONTRAST, MEASURED (not guessed) against the 4.5:1 the system requires:
     #6ee7b7 on --black #07060b ....... 13.25:1   accent, dark tone
     #047857 on --white #ffffff ........ 5.48:1   accent, light tone
     #047857 on --paper #f5f5f7 ........ 5.04:1
     #04231a on the brand fill ......... 6.57:1   button ink on the gradient
   #10b981 — the natural "brand green" — is 2.54:1 on white and is therefore a
   FILL colour only, never an ink on light.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mint:#047857;            /* accent on light ground — measured above     */
  --mint-d:#6ee7b7;          /* accent on dark ground                       */
  --brand:linear-gradient(135deg,#34d399,#10b981);
  --brand-ink:#04231a;       /* what sits ON the brand fill                 */
  --brand-glow:16,185,129;
}

/* The tone blocks in fg.css set --acc from the violet; re-point them.
   Same specificity as fg.css's, later in the cascade, so these win. */
[data-tone="dark"]{
  --acc:var(--mint-d);
  /* ONE green, not two. The system keeps a semantic green separate from the
     accent so a success state cannot borrow the brand — but here the brand IS
     green, and two greens one shade apart at 12px read as two different
     things rather than as brand + state. The applied example resolved this the
     same way. Warn and bad stay their own hues and still carry the state. */
  --okc:var(--mint-d);
}
[data-tone="light"]{
  --acc:var(--mint);
  --okc:var(--mint);
}

/* fg.css hard-codes the violet in two places that tone does not reach. */
::selection{background:rgba(16,185,129,.30)}
.lockup .word b{color:#9df0cd}

/* The solid button's ink: on the violet gradient white was right, on mint it
   is not — #fff on #10b981 is 3.77:1. Dark ink measures 6.57:1. */
.btn.solid{color:var(--brand-ink)}
[data-lg-tone="light"] .lockup .word b{color:#046a4d}