/* =============================================================================
   Bluefin Design System - Base / Reset  (Phase 2 / Workstream 1)
   -----------------------------------------------------------------------------
   A deliberately SCOPED base layer. During the Bootstrap-coexistence period this
   file must not restyle bare elements (body, h1, a, .btn, ...), because Bootstrap
   3.3.4 and the legacy hozi.main.css still own those globally. Everything here is
   gated behind the opt-in .bf-scope container (or applies to bf- components
   directly), so adding the design system to the page changes nothing until a
   region opts in with class="bf-scope". References tokens.css only.

   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

/* Opt-in scope: a page region rebuilt on the design system wraps itself in
   .bf-scope to inherit the base typography and border-box sizing. */
.bf-scope {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text);
}

.bf-scope *,
.bf-scope *::before,
.bf-scope *::after {
  box-sizing: border-box;
}

/* Headings inside a scoped region use the display face. Scoped so we do not
   touch the global h1..h6 that Bootstrap/legacy styles still control. */
.bf-scope h1,
.bf-scope h2,
.bf-scope h3,
.bf-scope h4,
.bf-scope h5,
.bf-scope h6 {
  margin: 0 0 var(--bf-space-3);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}

.bf-scope h1 { font-size: var(--bf-text-3xl); }
.bf-scope h2 { font-size: var(--bf-text-2xl); }
.bf-scope h3 { font-size: var(--bf-text-xl); }
.bf-scope h4 { font-size: var(--bf-text-lg); }
.bf-scope h5 { font-size: var(--bf-text-base); }
.bf-scope h6 { font-size: var(--bf-text-sm); }

.bf-scope p { margin: 0 0 var(--bf-space-4); }

/* Editorial rule (conventions.md 5.4): brand teal never carries text. The only
   teal that may carry text on a light surface is --bf-color-primary-text
   (#00737f, 5.1:1 on paper); --bf-color-primary is 2.5:1 and fails WCAG AA. So
   body links use the readable teal and deepen to ink on hover/focus.

   This reset must sit at exactly (0,0,2), and BOTH halves of that are load-bearing.

   The :where() drops the .bf-scope class to zero, so the reset LOSES to any
   component class. Written plainly it was (0,1,1), which quietly beat every
   single-class component that happened to land on an <a>. Because `transition` is
   a SHORTHAND, winning here did not merely add a color transition, it REPLACED the
   component's whole transition declaration: a card that asked for
   `transform, box-shadow` computed to `color` and snapped instead of lifting, with
   its own transition line sitting right there looking correct. (.bf-om-action and
   .bf-tile were both silently snapping for this reason.) The hover underline leaked
   the same way.

   The leading `html` is a type selector, and it is here to WIN one specific fight:
   hozi.main.css:55 declares a bare `a { color: black; &:hover { color: #24b93c } }`
   and it loads AFTER this file. At (0,0,1) that would tie a bare :where() reset and
   win on source order, turning every body link black and every link hover GREEN.
   `html` makes this (0,0,2), which outranks a bare `a` on type count while still
   losing to any class. Do not "clean up" either piece: drop the html and links go
   black, drop the :where() and the hover lifts snap. */
html :where(.bf-scope) a {
  color: var(--bf-color-primary-text);
  text-decoration: none;
  transition: color var(--bf-transition-fast);
}

html :where(.bf-scope) a:hover,
html :where(.bf-scope) a:focus-visible {
  color: var(--bf-color-text);
  text-decoration: underline;
}

/* A shared, visible focus ring for keyboard users on any bf- interactive
   element. Components may extend this; they should not remove it. */
.bf-scope :focus-visible {
  outline: 2px solid var(--bf-color-primary);
  outline-offset: 2px;
}

/* Visually-hidden helper for accessible labels on icon-only controls. */
.bf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}