/* =============================================================================
   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. */
.bf-scope a {
  color: var(--bf-color-primary-text);
  text-decoration: none;
  transition: color var(--bf-transition-fast);
}

.bf-scope a:hover,
.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;
}