/**
 * HES typography - one type scale, no ad hoc font sizes.
 *
 * Font: IBM Plex Sans, one family at multiple weights (not a serif/sans
 * pair) - loaded via hes_theme.libraries.yml's `google-fonts` library.
 * Chosen over the brief's suggested Inter/General Sans/Satoshi
 * alternatives to the licensed Cera Pro: free, self-hostable, and
 * designed for enterprise/technical brand identity, which fits a federal
 * IT contractor's positioning without defaulting to Inter (a look
 * associated with generic/templated AI-assisted design).
 *
 * Headings never go below 600 weight (brief's own rule). Body text is
 * regular (400), not the ConnectWise reference's light (300) - a
 * deliberate deviation, since "light" body text reads flimsier than
 * this site's "credible, technically serious" positioning calls for.
 */

:root {
  --hes-font-family-base: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Type scale - size / line-height / weight / letter-spacing per level */
  --hes-text-caption-size: 0.75rem;
  --hes-text-caption-line-height: 1.4;
  --hes-text-caption-weight: 500;
  --hes-text-caption-letter-spacing: 0.02em;

  --hes-text-small-size: 0.875rem;
  --hes-text-small-line-height: 1.5;
  --hes-text-small-weight: 400;
  --hes-text-small-letter-spacing: normal;

  --hes-text-body-size: 1rem;
  --hes-text-body-line-height: 1.65;
  --hes-text-body-weight: 400;
  --hes-text-body-letter-spacing: normal;

  --hes-text-body-large-size: 1.125rem;
  --hes-text-body-large-line-height: 1.6;
  --hes-text-body-large-weight: 400;
  --hes-text-body-large-letter-spacing: normal;

  --hes-text-h6-size: 1.125rem;
  --hes-text-h6-line-height: 1.4;
  --hes-text-h6-weight: 600;
  --hes-text-h6-letter-spacing: normal;

  --hes-text-h5-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --hes-text-h5-line-height: 1.35;
  --hes-text-h5-weight: 600;
  --hes-text-h5-letter-spacing: normal;

  --hes-text-h4-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --hes-text-h4-line-height: 1.3;
  --hes-text-h4-weight: 700;
  --hes-text-h4-letter-spacing: -0.005em;

  --hes-text-h3-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  --hes-text-h3-line-height: 1.25;
  --hes-text-h3-weight: 700;
  --hes-text-h3-letter-spacing: -0.01em;

  --hes-text-h2-size: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --hes-text-h2-line-height: 1.2;
  --hes-text-h2-weight: 800;
  --hes-text-h2-letter-spacing: -0.015em;

  --hes-text-h1-size: clamp(2.25rem, 1.8rem + 2.2vw, 3rem);
  --hes-text-h1-line-height: 1.12;
  --hes-text-h1-weight: 800;
  --hes-text-h1-letter-spacing: -0.02em;
}

body {
  font-family: var(--hes-font-family-base);
  font-size: var(--hes-text-body-size);
  line-height: var(--hes-text-body-line-height);
  font-weight: var(--hes-text-body-weight);
}

/* Olivero's base.css sets its own static body background-color
   (--color--gray-100) - without an override, only .hes-site-header/
   __footer (which set their own background explicitly via a class
   selector) and the always-dark .hes-dark sections respond to the
   toggle. Every other section has no background rule of its own and
   inherits this one, so a plain `body { background: ... }` here left
   dark mode correctly relighting text-primary/text-secondary to light
   colors while the page behind them stayed Olivero's light gray -
   confirmed via a real screenshot, not just read from the CSS.
   Root cause of THAT: this stylesheet loads before Olivero's base.css
   in this theme's current library order (confirmed via
   document.styleSheets, not assumed), so a same-specificity `body`
   rule here loses the cascade to Olivero's later one. `html body`
   raises specificity instead of fighting load order - matches the
   existing header/footer pattern of out-specifying Olivero rather than
   depending on being loaded after it.

   Also sets `color` here for the same reason, covering a second, wider
   gap: components like feature-row explicitly set
   `color: var(--hes-color-text-primary)` on their own headings, but any
   *plain*, unclassed heading or text node (e.g. the homepage's bare
   `<h2>Case Studies</h2>`) has no such rule and was falling back to
   Olivero's own static (light-mode-only) heading color - confirmed via
   computed style: rgb(11, 13, 15) (near-black) on a navy-900 dark-mode
   background, functionally invisible. Setting color at the body level
   makes text-primary the real default for everything that doesn't
   override it, instead of requiring every component to opt in
   individually. */
html body {
  background: var(--hes-color-background);
  color: var(--hes-color-text-primary);
}

/* Same inheritance gap as html body/h1-h6 above, for plain links this
   time: Olivero's base.css matches `a` directly with its own static
   `color`/`:hover` pair. `.hes-link` (components/base/link/) already
   handles this correctly for links that carry it (a class selector
   already outranks Olivero's plain `a` on specificity regardless of
   load order), but a rich-text/CKEditor link with no class fell back to
   Olivero's static color exactly like the bare heading case did. `html
   a` (0,0,2) beats Olivero's `a` (0,0,1) without touching `.hes-link`
   (0,1,0), which still wins over both when present. */
html a {
  color: var(--hes-color-link);
}
html a:hover {
  color: var(--hes-color-link-hover);
}

/* Same inheritance gap again, this time for rich-text/CKEditor field
   content: Olivero's css/components/text-content.css matches
   `.text-content, .cke_editable` directly with a static color (confirmed
   via document.styleSheets - not guessed). Any field rendered through
   Drupal's basic_html/full_html text format gets this class (e.g. the
   login page's address block, block-hes-theme-address), so it went
   invisible in dark mode exactly like the bare-heading/plain-link cases
   above. `html body .text-content` (0,1,2) beats Olivero's `.text-content`
   (0,1,0) on specificity. This is a *class* selector Olivero owns, not an
   element one - if another Olivero component CSS file turns up with the
   same pattern (a class, not a tag, carrying a static color), it needs
   this same `html body .the-class` treatment, not the plain `html
   the-tag` one used above. */
html body .text-content,
html body .cke_editable {
  color: var(--hes-color-text-primary);
}

/* Olivero's base.css matches h1-h6 directly with its own
   `color: var(--color-text-neutral-loud)` (a static, light-mode-only
   value). A directly-matching rule always wins over an element's
   *inherited* color regardless of specificity, so html body's color
   above never reaches a bare heading - confirmed via computed style on
   the homepage's unclassed `<h2>Case Studies</h2>`: rgb(11, 13, 15)
   (near-black) on a navy-900 dark-mode background. `html h1` etc. both
   matches the heading directly (beats inheritance) and outranks
   Olivero's plain `h1` on specificity (0,0,2 vs 0,0,1), so it wins
   regardless of the two stylesheets' load order. */
html h1, .hes-text-h1 { font-size: var(--hes-text-h1-size); line-height: var(--hes-text-h1-line-height); font-weight: var(--hes-text-h1-weight); letter-spacing: var(--hes-text-h1-letter-spacing); text-wrap: balance; color: var(--hes-color-text-primary); }
html h2, .hes-text-h2 { font-size: var(--hes-text-h2-size); line-height: var(--hes-text-h2-line-height); font-weight: var(--hes-text-h2-weight); letter-spacing: var(--hes-text-h2-letter-spacing); text-wrap: balance; color: var(--hes-color-text-primary); }
html h3, .hes-text-h3 { font-size: var(--hes-text-h3-size); line-height: var(--hes-text-h3-line-height); font-weight: var(--hes-text-h3-weight); letter-spacing: var(--hes-text-h3-letter-spacing); color: var(--hes-color-text-primary); }
html h4, .hes-text-h4 { font-size: var(--hes-text-h4-size); line-height: var(--hes-text-h4-line-height); font-weight: var(--hes-text-h4-weight); letter-spacing: var(--hes-text-h4-letter-spacing); color: var(--hes-color-text-primary); }
html h5, .hes-text-h5 { font-size: var(--hes-text-h5-size); line-height: var(--hes-text-h5-line-height); font-weight: var(--hes-text-h5-weight); color: var(--hes-color-text-primary); }
html h6, .hes-text-h6 { font-size: var(--hes-text-h6-size); line-height: var(--hes-text-h6-line-height); font-weight: var(--hes-text-h6-weight); color: var(--hes-color-text-primary); }

.hes-text-body-large { font-size: var(--hes-text-body-large-size); line-height: var(--hes-text-body-large-line-height); font-weight: var(--hes-text-body-large-weight); }
.hes-text-small { font-size: var(--hes-text-small-size); line-height: var(--hes-text-small-line-height); font-weight: var(--hes-text-small-weight); }
.hes-text-caption { font-size: var(--hes-text-caption-size); line-height: var(--hes-text-caption-line-height); font-weight: var(--hes-text-caption-weight); letter-spacing: var(--hes-text-caption-letter-spacing); }

/**
 * Tagline resolution (Layer 0's tone-clash defect): restyled to be
 * visually subordinate to the hero headline, not rewritten or removed -
 * copy changes are a separate, ongoing content workstream (see recent
 * "Copy refresh" commits). Demoted to the caption scale in muted
 * secondary text so it reads as a small descriptor, not a competing
 * headline-weight statement, regardless of its current wording.
 */
.hes-tagline {
  font-size: var(--hes-text-caption-size);
  line-height: var(--hes-text-caption-line-height);
  font-weight: var(--hes-text-caption-weight);
  letter-spacing: var(--hes-text-caption-letter-spacing);
  color: var(--hes-color-text-secondary, #5b6b76);
}