/* ============================================================
   CFA TYPOGRAPHY FOUNDATION
   Phase: Foundation > Typography
   Scope: font-family, heading weight/spacing, type utility classes

   APPROACH — additive, low-risk first pass:
   - body font-family switched to DM Sans (overrides Karla in designer.css)
   - heading font-family, weight, letter-spacing, line-height applied globally
   - heading font-sizes NOT changed in this pass — Bootstrap 3 EM-based
     sizing depends on the 14px body base; size migration belongs in
     P-01 Layout Shell once the CSS reset is established
   - link colors NOT changed globally — Bootstrap overrides required first
   - new .cfa-* utility classes carry the full design-system type scale;
     use these on new/migrated markup

   Requires: cfa-tokens.css loaded first
   ============================================================ */


/* ── BODY FONT FAMILY ──
   designer.css sets font-family with !important (Karla).
   Matching !important here ensures DM Sans takes effect.
   font-size intentionally left alone (Bootstrap 3 14px EM chain).
*/
body {
  font-family: var(--cfa-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── GLOBAL FOCUS RING (COMPONENT_STATES §15) ──
   Visible keyboard focus indicator on all interactive elements.
   Mouse users see no change (focus:not(:focus-visible) suppresses it).
*/
:focus-visible {
  outline: 2px solid var(--cfa-cobalt);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ── GLOBAL DISABLED STATE (COMPONENT_STATES §16) ──
   Universal disabled rule — applies to all components.
   Per-component overrides can narrow scope where needed.
*/
[disabled]:not(input):not(select):not(textarea):not(button),
.disabled {
  opacity: 0.50 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ── HEADING DEFAULTS ──
   Apply DM Sans + weight/letter-spacing hierarchy to all headings.
   !important on font-family only — weights and spacing can lose to later rules
   without harm. Font sizes left at Bootstrap defaults for this pass.
*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cfa-font-body) !important;
  letter-spacing: var(--cfa-tracking-tight);
  line-height: var(--cfa-leading-snug);
}

h1 { font-weight: var(--cfa-weight-black); }
h2 { font-weight: var(--cfa-weight-black); }
h3 { font-weight: var(--cfa-weight-extrabold); }
h4 { font-weight: var(--cfa-weight-extrabold); }
h5 { font-weight: var(--cfa-weight-bold); }
h6 { font-weight: var(--cfa-weight-bold); }


/* ── CFA HEADING UTILITY CLASSES ──
   Use on new and migrated markup. Carry the full design-system type scale.
*/
.cfa-h1 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-heading-section);    /* clamp(36px, 4vw, 56px) */
  font-weight: var(--cfa-weight-black);
  letter-spacing: var(--cfa-tracking-tight);
  line-height: var(--cfa-leading-snug);
  color: var(--cfa-text);
}

.cfa-h2 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-5xl);           /* 36px */
  font-weight: var(--cfa-weight-black);
  letter-spacing: var(--cfa-tracking-tight);
  line-height: var(--cfa-leading-snug);
  color: var(--cfa-text);
}

.cfa-h3 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-4xl);           /* 34px */
  font-weight: var(--cfa-weight-extrabold);
  letter-spacing: var(--cfa-tracking-tight);
  line-height: var(--cfa-leading-snug);
  color: var(--cfa-text);
}

.cfa-h4 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-2xl);           /* 24px */
  font-weight: var(--cfa-weight-extrabold);
  letter-spacing: var(--cfa-tracking-snug);
  line-height: var(--cfa-leading-heading);
  color: var(--cfa-text);
}

.cfa-h5 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-xl);            /* 22px */
  font-weight: var(--cfa-weight-extrabold);
  letter-spacing: var(--cfa-tracking-snug);
  line-height: var(--cfa-leading-heading);
  color: var(--cfa-text);
}

.cfa-h6 {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-lg);            /* 18px */
  font-weight: var(--cfa-weight-bold);
  line-height: var(--cfa-leading-heading);
  color: var(--cfa-text);
}

/* Admin / dense UI heading scale */
.cfa-admin-title {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-3xl);           /* 28px */
  font-weight: var(--cfa-weight-extrabold);
  letter-spacing: var(--cfa-tracking-snug);
  line-height: var(--cfa-leading-heading);
  color: var(--cfa-text);
}

.cfa-section-header {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-2xl);           /* 24px */
  font-weight: var(--cfa-weight-extrabold);
  letter-spacing: var(--cfa-tracking-snug);
  line-height: var(--cfa-leading-heading);
  color: var(--cfa-text);
}

.cfa-panel-title {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);            /* 14px */
  font-weight: var(--cfa-weight-bold);
  color: var(--cfa-text-muted);
}


/* ── BODY TEXT UTILITY CLASSES ── */
.cfa-text-body {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-lg);
  font-weight: var(--cfa-weight-normal);
  line-height: var(--cfa-leading-normal);
  color: var(--cfa-text);
}

.cfa-text-muted {
  color: var(--cfa-text-muted);
  font-size: var(--cfa-text-sm);
  line-height: 1.5;
}

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

.cfa-text-xs {
  font-size: var(--cfa-text-xs);
  line-height: 1.4;
}


/* ── EYEBROW / CATEGORY LABEL ── */
.cfa-eyebrow {
  font-family: var(--cfa-font-body);
  font-size: var(--cfa-text-sm);
  font-weight: var(--cfa-weight-bold);
  letter-spacing: var(--cfa-tracking-widest);
  text-transform: uppercase;
  color: var(--cfa-cobalt);
  display: block;
}

.cfa-dark .cfa-eyebrow {
  color: var(--cfa-cobalt-link);
}


/* ── BADGE / CHIP TEXT HELPERS ── */
.cfa-badge-label {
  font-size: var(--cfa-text-sm);
  font-weight: var(--cfa-weight-bold);
  letter-spacing: var(--cfa-tracking-wide);
}

.cfa-chip-label,
.cfa-tag-label {
  font-size: var(--cfa-text-xs);
  font-weight: var(--cfa-weight-bold);
  letter-spacing: var(--cfa-tracking-wider);
  text-transform: uppercase;
}


/* ── ADMIN TABLE HEADER ──
   Maps PHP class .admin-portfolio-header → .cfa-table-th
*/
.cfa-table-th {
  font-size: var(--cfa-text-xs);
  font-weight: var(--cfa-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cfa-text-muted);
}


/* ── COLOR HIGHLIGHT UTILITIES ── */
.cfa-hl-cobalt { color: var(--cfa-cobalt); }
.cfa-hl-amber  { color: var(--cfa-amber); }


/* ── RISK / LEGAL TEXT ── */
.cfa-risk-text {
  font-size: var(--cfa-text-base);
  color: var(--cfa-text-muted);
  line-height: var(--cfa-leading-loose);
}


/* ── DARK SURFACE TEXT CONTEXT ──
   Apply .cfa-dark to any container with a navy/dark background.
   Text colors switch automatically.
*/
.cfa-dark {
  color: var(--cfa-on-dark-mid);
}

.cfa-dark h1,
.cfa-dark h2,
.cfa-dark h3,
.cfa-dark h4,
.cfa-dark h5,
.cfa-dark h6,
.cfa-dark .cfa-h1,
.cfa-dark .cfa-h2,
.cfa-dark .cfa-h3,
.cfa-dark .cfa-h4,
.cfa-dark .cfa-h5,
.cfa-dark .cfa-h6 {
  color: var(--cfa-on-dark);
}

.cfa-dark p {
  color: var(--cfa-on-dark-mid);
}


/* ── SELECTION ── */
::selection {
  background: var(--cfa-cobalt-pale);
  color: var(--cfa-cobalt);
}