/* chatterbox_csi_tokens.css — the canon token layer for the CSI family.

   Loaded first on every ver8 page (9 as of 2026-09-26), ahead of chatterbox_csi_ver8.css. ver8 no
   longer declares these tokens: this file is the only place they exist.

   What this is, and what it is not. This started as a reconciliation between
   ver8 and the ver6 family, which had drifted to different values under the
   same token names on sibling pages of the same site:

     --hairline   ver8 rgba(15, 118, 110, 0.22)  teal-derived
                  ver6 rgba(12, 39, 48, 0.12)    ink-derived
     --focus      ver8 #0891B2  ocean
                  ver6 #EC486A  coral

   ver6 is being retired and ver8 is canon, so that reconciliation is moot and
   ver6 was left untouched. No rendered value changed here: ver8 already used
   both of these. What this file does is give the canon values one home, so the
   next surface to adopt them does not fork them again.

   That next surface is the product UI. contact-operations.css and
   customer-admin.css are on-brand but still carry their own copies, with the
   ink-derived hairline ver6 had. They are out of scope here and differ from this
   file on purpose. When the product surface converges, it should link this file
   rather than redeclare.

   Two hairlines, by role (resolved 2026-09-26). --hairline is the teal edge of
   cards, chips, panels and the chat bubble: brand surface. --hairline-neutral is
   structure: section and list dividers and the form input, at the ink-derived
   value the rest of the repo uses. The former --hairline-teal (0.24, two
   hundredths from --hairline and indistinguishable) was merged into --hairline.

   --focus is ocean at 3.48:1 on sand, which clears the 3:1 floor WCAG sets for a
   non-text indicator. Do not take it below that: the ring is the only thing a
   keyboard user has to go on. */

/* DM Serif Display italic, the family's real italic face. demo-fonts.css vendors only
   the upright, so every italic heading was a slant the browser synthesised. Declared
   here rather than in demo-fonts.css because that file is shared with the product
   surface and is regenerated whole by tools/font-vendoring/fetch_google_fonts.py.
   Fetched 2026-09-26 with that script's User-Agent and file naming from
   https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap
   (revision v17, the same as the vendored upright). */
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/v17--nFhOHM81r4j6k0gjAW3mujVU2B2G_VB3vD212k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/v17--nFhOHM81r4j6k0gjAW3mujVU2B2G_VB0PD2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hairline: rgba(15, 118, 110, 0.22);
  --focus: #0891B2;
  --hairline-neutral: rgba(12, 39, 48, 0.12);

  /* Ocean for text at body size. --ocean-mid (#0891B2) is 3.48:1 on sand, which
     clears 3:1 for headings 24px and up, strokes, fills and the focus ring, and
     fails 4.5:1 for anything smaller. #0E7490 is 5.06:1 on sand and 5.36:1 on
     white; it is the same substitution print makes. On the coral wash it reaches
     only 4.37:1, so text there still needs checking. */
  --ocean-text: #0E7490;

  /* The primary action. White label, 15px bold, so it needs 4.5:1 at every point
     under it; text-shadow does not count. Worst point: resting 4.63:1 (the light
     end, #0D8378), hover 5.47:1 (#0F766E). The earlier ramp ended on #14B8A6 at
     2.49:1, and its hover ended on #0D9488 at 3.74:1. Do not lighten either end
     without re-measuring. */
  --grad-cta: linear-gradient(135deg, #115E59 0%, #0F766E 50%, #0D8378 100%);
  --grad-cta-hover: linear-gradient(135deg, #134E4A 0%, #115E59 50%, #0F766E 100%);

  /* Bold serif. DM Serif Display ships at weight 400 only (plus an italic), so any
     rule asking it for 600 to 800 got a bold the browser faked, differently in each
     engine. Bold serif text is drawn at 400 with this stroke instead. 0.02em matches
     what Chrome's fake bold drew, adds no width, and renders the same everywhere.
     The stroke colour is left as currentColor, so on gradient text (transparent
     colour) background-clip: text fills the stroked shape with the gradient. */
  --serif-bold-stroke: 0.02em;
}

/* The global focus ring lives beside the token it depends on, which is what
   stops the two drifting apart again.

   :focus-visible rather than :focus, so the ring appears for keyboard and
   assistive navigation and not on a mouse click. Components that need a
   different treatment (the card lift on .faq-cat-card, the sheen on
   .btn-primary, the coral halo on text inputs) override it with a more specific
   selector and are unchanged by the move out of chatterbox_csi_ver8.css. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}