/*!
 * ZIC typography — scale, weights, utilities and inline text
 * ============================================================================
 * Layer 5 of the theme stack (see src/templates/layouts/partials/styles.html).
 *
 * WHAT WAS ALREADY CORRECT (measured on /partners/, not assumed)
 *
 *   - The primary font stack. `--bs-font-sans-serif` already resolves to
 *     `"Inter", -apple-system, blinkmacsystemfont, "Segoe UI", …` and the
 *     webfont is loaded at weights 300–700 by styles.html. Nothing to add
 *     beyond naming it as a token.
 *   - Alignment, transform and decoration utilities. Bootstrap ships
 *     `.text-start`/`.text-end`/`.text-center`, `.text-uppercase` and friends,
 *     `.text-decoration-*`, `.text-truncate` and `.line-clamp-1/2/3`. The brief
 *     names `text-left`/`text-right`, which this build does not have — those
 *     are added as aliases in section 3, with the logical pair left canonical
 *     because 249 templates already use `text-end`.
 *   - Link colour. Already `--zic-primary-text` through
 *     `--bs-link-color-rgb`, measured at 8.72:1 light and 8.11:1 dark.
 *   - Font weights. Bootstrap's `.fw-*` utilities already implement the scale
 *     and are in use 280 times (`fw-medium` 160, `fw-semibold` 74). This file
 *     adds the weight *tokens* so new CSS quotes the contract instead of
 *     hardcoding 600; it does not add a second set of utilities.
 *   - The focus ring on links, via the global `:where(a, button, …)` rule.
 *
 * WHAT THIS FIXES
 *
 *   1. `code` had no background, no padding and no radius, and its colour was
 *      the shell's pink `#E83E8C` — **3.66:1** on the code background and
 *      3.82:1 on white, a WCAG AA failure for text. Now a violet ink at 6.8:1
 *      light / 9.7:1 dark, on a tinted chip.
 *   2. `kbd` was inverted (dark fill, light text) with no border, no shadow and
 *      3px/6px padding. Now a keycap: raised surface, 1px edge, sm shadow.
 *   3. Links did not underline on hover — the shell sets
 *      `--bs-link-decoration: none` and `a { text-decoration: none }`. And
 *      `:visited` had no treatment at all.
 *   4. There was no type scale: every `.zic-text-*` size in the brief resolved
 *      to the body's 15px. The eight steps are now tokens and opt-in classes.
 *
 * Applied as opt-in classes, never as a global rewrite: setting the document to
 * the scale's `base` (16px) would relayout every page in the app, which is a
 * different decision from making the scale available. See guide section 15.
 */

/* ===========================================================================
 * 1. Font stacks.
 *
 * Pointed at the ZIC tokens so the family is named in one place. The mono stack
 * puts JetBrains Mono and Fira Code first: neither ships as a webfont here, so
 * a machine that has them installed uses them and everything else falls through
 * to the shell's faces.
 * ======================================================================== */
:root {
  --bs-font-sans-serif: var(--zic-font-family-sans);
  --bs-font-monospace: var(--zic-font-family-mono);
}

/* ===========================================================================
 * 2. Type scale.
 *
 * Size and leading are set together, so a step is never half-applied. Display
 * sizes take the tight tracking; the small end stays at normal spacing, where
 * negative tracking makes small text harder to read rather than easier.
 * ======================================================================== */
.zic-text-xs {
  font-size: var(--zic-font-size-xs);
  line-height: var(--zic-line-height-xs);
}

.zic-text-sm {
  font-size: var(--zic-font-size-sm);
  line-height: var(--zic-line-height-sm);
}

.zic-text-base {
  font-size: var(--zic-font-size-base);
  line-height: var(--zic-line-height-base);
}

.zic-text-lg {
  font-size: var(--zic-font-size-lg);
  line-height: var(--zic-line-height-lg);
}

.zic-text-xl {
  font-size: var(--zic-font-size-xl);
  line-height: var(--zic-line-height-xl);
}

.zic-text-2xl {
  font-size: var(--zic-font-size-2xl);
  line-height: var(--zic-line-height-2xl);
  letter-spacing: var(--zic-font-tracking-tight);
}

.zic-text-3xl {
  font-size: var(--zic-font-size-3xl);
  line-height: var(--zic-line-height-3xl);
  letter-spacing: var(--zic-font-tracking-tight);
}

.zic-text-4xl {
  font-size: var(--zic-font-size-4xl);
  line-height: var(--zic-line-height-4xl);
  letter-spacing: var(--zic-font-tracking-tight);
}

/* Weight utilities under the brief's names. Bootstrap's `.fw-*` already covers
   this and stays the idiom for templates; these exist so the brief's vocabulary
   works and so `--zic-font-weight-*` has a consumer. */
.zic-font-light {
  font-weight: var(--zic-font-weight-light);
}

.zic-font-regular {
  font-weight: var(--zic-font-weight-regular);
}

.zic-font-medium {
  font-weight: var(--zic-font-weight-medium);
}

.zic-font-semibold {
  font-weight: var(--zic-font-weight-semibold);
}

.zic-font-bold {
  font-weight: var(--zic-font-weight-bold);
}

/* ===========================================================================
 * 3. Utility aliases.
 *
 * `text-left` / `text-right` are the brief's names; this build ships the
 * logical pair (`text-start` / `text-end`), which Bootstrap uses and 249
 * templates already rely on. Both work — the aliases are physical, so on an
 * RTL page they deliberately do not flip.
 * ======================================================================== */
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ===========================================================================
 * 4. Inline code and keycaps.
 * ======================================================================== */

/* `code` inherits the page's font-size in the shell (1em) but drops to 0.8125rem
   on its own, which makes inline code smaller than the sentence around it. The
   scale's `sm` step keeps it subordinate without shrinking it twice. */
code {
  padding: 2px 6px;
  font-family: var(--zic-font-family-mono);
  font-size: var(--zic-font-size-sm);
  color: var(--zic-code-text);
  background-color: var(--zic-code-bg);
  border-radius: var(--zic-radius-xs);
  /* Long identifiers must not push a table column wide. `break-word`, not
     `anywhere`: the latter also lets a short word break mid-word in a narrow
     column, which body copy at these sizes cannot afford. */
  overflow-wrap: break-word;
}

/* A code block is a container, not a chip: no fill of its own, and the inner
   `code` keeps the block's font-size rather than stepping down again. */
pre {
  font-family: var(--zic-font-family-mono);
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

a > code {
  color: inherit;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--zic-font-family-mono);
  font-size: var(--zic-font-size-xs);
  line-height: 1.4;
  color: var(--zic-kbd-text);
  background-color: var(--zic-kbd-bg);
  border: 1px solid var(--zic-kbd-border);
  border-radius: var(--zic-radius-xs);
  box-shadow: var(--zic-shadow-sm);
}

/* Nested keycaps (a chord like Ctrl + K) lose the doubling. */
kbd kbd {
  padding: 0;
  font-size: 1em;
  border: 0;
  box-shadow: none;
}

/* ===========================================================================
 * 5. Highlight.
 *
 * `<mark>` keeps its meaning — a passage the reader was referred to — and the
 * colour is a token pair rather than a raw yellow, so it holds 13.1:1 in light
 * and 7.3:1 in dark instead of leaving dark text on a bright wash.
 * ======================================================================== */
mark,
.mark {
  padding: 0 2px;
  color: var(--zic-highlight-text);
  background-color: var(--zic-highlight-bg);
  border-radius: var(--zic-radius-xs);
}

/* ===========================================================================
 * 6. Links.
 *
 * The colour comes from the token layer already (`--bs-link-color-rgb` ->
 * `--zic-primary-text`). What the brief adds is the hover underline and a
 * visited state, neither of which the shell had — it sets
 * `--bs-link-decoration: none` globally.
 *
 * The brief asked for `var(--zic-interactive-focus)`. That token does not
 * exist; the one that does, `--zic-interactive-focus-ring`, is a 90%-alpha ring
 * colour that composites to about 3.2:1 on white — below AA for text. Links
 * keep `--zic-primary-text` at 8.72:1 / 8.11:1.
 *
 * A plain `a:hover` is enough: Bootstrap's `.text-decoration-none` carries
 * `!important`, so a template that deliberately drops the underline still wins.
 * ======================================================================== */
a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The shell already styles `a:not([href])`; this makes the intent explicit — a
   link with nowhere to go is signalled by its decoration, not its colour. */
a:not([href]) {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Browsers restrict which properties `:visited` may set, and `color` is the one
   that matters. The token is darker than the resting link on light and
   desaturated on dark; both clear AA. */
a:visited {
  color: var(--zic-link-visited);
}

/* External links. The icon is drawn in CSS so no template has to remember it;
   it inherits `currentColor` and is decorative, so it is `aria-hidden` by
   construction (a pseudo-element is never in the accessible name). */
a.zic-link-external::after {
  content: '';
  display: inline-block;
  inline-size: 0.75em;
  block-size: 0.75em;
  margin-inline-start: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  /* An arrow leaving a box — the conventional "opens elsewhere" glyph. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The underline on hover must not extend under the icon. */
a.zic-link-external:hover::after,
a.zic-link-external:focus-visible::after {
  text-decoration: none;
}