/* =========================================================================
   Canonical component: Text emphasis (Requirements 5.1, 5.6, 3.6)

   The paired stylesheet for `layouts/shortcodes/emphasis.html`. That shortcode
   emits exactly one element carrying `class="tkc-emphasis tkc-emphasis-<role>"`
   and no `style` attribute (Requirement 5.6); this file is where the color
   actually comes from, which is what lets an emphasized run follow the
   appearance (Requirement 3.6). The five ad-hoc definitions it replaces each
   baked one hex value into an inline `style`, so they rendered the same color in
   light and dark.

   One role rule per entry in `data/tokens.json` -> `emphasisTokens`, currently
   accent, accent-strong, text, text-muted. Each maps the role onto
   `var(--tkc-color-<role>)` and declares nothing else. The palette is narrower
   than the full color set on purpose: `bg`, `surface`, `border`, and `focus` are
   defined tokens but are not text colors, and the shortcode fails the build
   rather than emit a class this file would not style.

     .tkc-emphasis-accent          links and calls to action, in prose
     .tkc-emphasis-accent-strong   the same hue, pressed weight
     .tkc-emphasis-text           body ink; the shortcode's default role
     .tkc-emphasis-text-muted     an aside that is still prose

   Block and inline are distinguished by the element the shortcode chose, not by
   a second class: `inline="true"` gives a `<span>` and the default gives a
   `<p>`. So the block treatment is attached with an element-qualified selector,
   `p.tkc-emphasis`. Nothing in this file styles color outside the role rules,
   which matters because `p.tkc-emphasis` (0-1-1) would otherwise outrank
   `.tkc-emphasis-accent` (0-1-0) and pin every block run to one color.

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirement 9.5). The exceptions are keywords and zero: `inherit` keeps an
   inline run typographically invisible in whatever line it sits in, and `0`
   collapses a margin. Neither is a design decision a token could hold.
   ========================================================================= */

/* An emphasized run is emphasized by color, not by size or weight: the legacy
   definitions changed color alone, and an inline run that also changed family
   or leading would disturb the line box it sits inside. `inherit` states that
   rather than leaving it to the user-agent sheet. */
.tkc-emphasis {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* The block form is a paragraph of prose, so it takes the text family, the
   prose floor, prose leading, and one spacing step beneath it. Space below
   only: the preceding block owns the space above, which is how stacked blocks
   avoid the doubled gaps the current layout drifts between. */
p.tkc-emphasis {
  font-family: var(--tkc-font-text);
  font-size: var(--tkc-size-100);
  line-height: var(--tkc-leading-normal);
  margin-block: 0 var(--tkc-space-4);
}

/* A block that closes its container adds no trailing space; the container's own
   padding already provides it. */
p.tkc-emphasis:last-child {
  margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   Role rules -- color only, one per emphasis token
   ------------------------------------------------------------------------- */

.tkc-emphasis-accent {
  color: var(--tkc-color-accent);
}

.tkc-emphasis-accent-strong {
  color: var(--tkc-color-accent-strong);
}

.tkc-emphasis-text {
  color: var(--tkc-color-text);
}

.tkc-emphasis-text-muted {
  color: var(--tkc-color-text-muted);
}

/* -------------------------------------------------------------------------
   Reduced motion (Requirement 3.10)

   Emphasis declares no transition and no animation of its own, but a colored
   run is a common target for a staggered reveal from the composition layer.
   Under `reduce` every run is held at zero duration in its final visible state,
   so a reveal added above this file cannot leave a phrase unpainted.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tkc-emphasis {
    transition-duration: 0s;
    transition-delay: 0s;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}