/* ── MARJCC brand tokens ────────────────────────────────────────────────────
 * Lifted from the JCC Brandbook (Aug 12) — the hexes below are the ones the
 * book actually prints its swatches in, not an eyeball match. They replaced an
 * earlier approximation (#006D83 / #0097B6 / #C0DDE1), which is why the old
 * names are kept as aliases at the bottom: nothing has to be renamed for a
 * screen to end up on brand.
 *
 * Two teals, and the difference carries weight. --jcc-teal is the DEEP one and
 * is the interface teal — nav, sidebar, buttons, links; --jcc-cyan is the
 * BRIGHT one the book uses for accents and large flat areas, and it does not
 * hold white text at small sizes, so it is never a button colour here.
 *
 * Type: the book pairs MURO (display) with ROBOTO (everything else). Muro is
 * licensed and we do not ship it, so --font-display falls through to Roboto —
 * a heavier weight of the right font beats a wrong font. Roboto itself is
 * loaded from Google Fonts, which the CSP already allows (style-src
 * fonts.googleapis.com, font-src fonts.gstatic.com), and every stack ends in
 * the system UI font so a blocked CDN costs the typeface, never the layout.
 */
:root {
  /* Primary */
  --jcc-teal:        #006D83;  /* deep teal — the interface colour */
  --jcc-teal-dark:   #00566A;  /* pressed / hover */
  --jcc-teal-deep:   #26677E;  /* the book's muted deep teal */
  --jcc-cyan:        #0097B6;  /* bright teal — accents, flat fills */
  --jcc-aqua:        #C0DDE1;  /* light aqua — tints, rules, chips */
  --jcc-aqua-pale:   #DFEEF0;  /* aqua at half strength — hover beds */
  --jcc-bg:          #EDF4F6;  /* page ground */

  /* Neutrals */
  --jcc-ink:         #211915;  /* near-black — headings */
  --jcc-charcoal:    #434142;  /* body text */
  --jcc-gray:        #5B5A5E;  /* secondary text */
  --jcc-gray-mid:    #96959A;  /* captions, placeholders */
  --jcc-gray-light:  #C2C3C8;  /* borders */
  --jcc-off-white:   #F7F7F8;
  --jcc-white:       #FFFFFF;

  /* Accent — the book's red. Sparingly, and never as decoration. */
  --jcc-red:         #BE0411;

  /* Type */
  --font-body:    'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-display: 'Muro', 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* ── Aliases kept from the pre-brandbook palette ── */
  --teal-dark:    var(--jcc-teal);
  --teal-mid:     var(--jcc-cyan);
  --teal-light:   var(--jcc-aqua);
  --teal-pale:    var(--jcc-aqua-pale);
  --gray-dark:    var(--jcc-charcoal);
  --gray-mid:     var(--jcc-gray-mid);
  --gray-light:   var(--jcc-gray-light);
  --white:        var(--jcc-white);
  --bg:           var(--jcc-bg);
}

/* Display face for page and card titles. Applied by the portals, not here —
 * a stylesheet of tokens that also restyles headings is one that cannot be
 * loaded next to anything. */
.jcc-display { font-family: var(--font-display); letter-spacing: -0.01em; }