/*
 * The re.je brand on the RHDS "Project Felt" preview theme.
 *
 * Mechanism at @rhds/elements 4.2.2 (verified 2026-09-29): the Felt look ships as a docs-site
 * stylesheet, not in the npm package. Source: docs/theming/themes/project-felt/preview/
 * felt-theme-preview.css in RedHat-UX/red-hat-design-system at tag v4.2.2; served at
 * https://ux.redhat.com/theming/themes/project-felt/preview/felt-theme-preview.css. It is scoped
 * to a `.felt-preview` wrapper and, per element, repoints `--rh-*` tokens and element properties
 * (pill radii, borders, spacing) to its own `--felt-preview-*` values. Docs:
 * https://ux.redhat.com/theming/themes/project-felt/ and each element's "felt-theme" demo.
 *
 * This adapter never vendors that file (AGENTS.md rules 1 and 3); apps/specimen fetches the
 * pinned copy at build time to show default and Felt shapes side by side. What this file does is
 * the only brand work Felt needs: the preview hard-codes Red Hat red as the primary call to
 * action's three background properties, and the lines below repoint them to the brand roles that
 * adapters/rhds.css already turned blue. Its other red literals (checked at v4.2.2) are var()
 * fallbacks, behind brand tokens the adapter sets or the red crayons of a `color="red"` tag, or
 * belong to rh-jump-link, which is not allow-listed in @bf/rhds; none needs repointing.
 * Everything else in the preview (pill geometry, borders, spacing) is left exactly as RHDS
 * documents it; no radii are hand-rolled here.
 *
 * Felt is on (ADR 0002): every page wraps its content in `.felt-preview`, loads the fetched
 * preview stylesheet (see @bf/rhds scripts/fetch-felt.mjs) and then this file.
 */

/* Call to action: the preview sets its own primary background properties to red literals. */
.felt-preview rh-cta {
  --felt-preview-cta-primary-bg-default: var(--rh-color-brand-red);
  --felt-preview-cta-primary-bg-hover: var(--rh-color-brand-red-dark);
  --felt-preview-cta-primary-bg-active: var(--rh-color-brand-red-dark);
}

/*
 * Felt preview defect, worked around here (measured 2026-09-29, Chrome; ADR 0002 answer d).
 * On hover, focus and active the preview swaps the 1px border of secondary, tertiary and brick
 * CTAs for a 2px one and takes 1px off the padding so the box stays the same size. Chrome rounds
 * border widths to whole device pixels, so at any browser zoom other than 100% (or a fractional
 * display scale) the two no longer cancel: at 90% zoom the CTA shrinks by 1.8px and its
 * neighbours nudge on every hover. Keeping the border and padding at their resting values and
 * drawing the extra ring thickness with an inset box-shadow (which never affects layout and
 * follows the pill radius) gives the same 2px ring with constant geometry. Reported upstream as
 * RedHat-UX/red-hat-design-system#3265; fixed in #3301 (merged 2026-10-07 to staging/horsea, not
 * yet in a release; v4.2.2 is still the latest).
 * todo: when bumping feltVersion past the release that carries #3301, delete the three rules below
 * in the same commit and re-measure CTA width at 90/100/125% zoom.
 */
.felt-preview
  rh-cta:is([variant='secondary'], [variant='tertiary'], [variant='brick'])::part(container):is(
    :hover,
    :focus-within,
    :active
  ) {
  border-width: var(--rh-border-width-sm);
  padding-block: var(--rh-space-lg);
  padding-inline: var(--rh-space-2xl);
}

.felt-preview rh-cta[variant='secondary']::part(container):is(:hover, :focus-within, :active) {
  box-shadow: inset 0 0 0 calc(var(--rh-border-width-md) - var(--rh-border-width-sm))
    var(--rh-color-border-strong);
}

.felt-preview
  rh-cta:is([variant='tertiary'], [variant='brick'])::part(container):is(
    :hover,
    :focus-within,
    :active
  ) {
  box-shadow: inset 0 0 0 calc(var(--rh-border-width-md) - var(--rh-border-width-sm))
    var(--felt-preview-color-border-interactive-subtle-default);
}