/**
 * @file
 * Typography — global element defaults + shared text utilities.
 *
 * Single source of truth for how every text element on the site looks.
 * All values come from the type-scale tokens defined in base.css :root
 * (--peak-text-*, --peak-weight-*, --peak-tracking-*, --peak-leading-*).
 *
 * Loaded in the `theme` SMACSS category so it cascades AFTER Olivero's
 * own h1/h2/h3 rules. Component-level files may still override these,
 * but should reach for the same tokens rather than hardcoding sizes.
 */

/* ---- Global body defaults --------------------------------------------------
 * Set the base size and line-height here once. Body inherits the body font
 * family from base.css (already enforced site-wide via body *).
 */
body {
  font-size: var(--peak-text-base);
  line-height: var(--peak-leading-base);
  font-weight: var(--peak-weight-regular);
}

/* ---- Heading scale --------------------------------------------------------
 * Headings inherit --peak-font-heading family and use the tighter leading.
 * Sizes ride the modular scale (1.25 ratio).
 */
h1,
.h1 {
  font-size: var(--peak-text-4xl);
  font-weight: var(--peak-weight-bold);
  line-height: var(--peak-leading-tight);
  letter-spacing: var(--peak-tracking-tight);
}

h2,
.h2 {
  font-size: var(--peak-text-3xl);
  font-weight: var(--peak-weight-bold);
  line-height: var(--peak-leading-tight);
  letter-spacing: var(--peak-tracking-tight);
}

h3,
.h3 {
  font-size: var(--peak-text-2xl);
  font-weight: var(--peak-weight-bold);
  line-height: var(--peak-leading-snug);
}

h4,
.h4 {
  font-size: var(--peak-text-xl);
  font-weight: var(--peak-weight-semi);
  line-height: var(--peak-leading-snug);
}

h5,
.h5 {
  font-size: var(--peak-text-lg);
  font-weight: var(--peak-weight-semi);
  line-height: var(--peak-leading-snug);
}

h6,
.h6 {
  font-size: var(--peak-text-base);
  font-weight: var(--peak-weight-semi);
  line-height: var(--peak-leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--peak-tracking-wide);
}

/* ---- Inline text defaults -------------------------------------------------- */
p {
  font-size: var(--peak-text-base);
  line-height: var(--peak-leading-base);
}

small,
.text-small {
  font-size: var(--peak-text-sm);
}

.text-xs    { font-size: var(--peak-text-xs); }
.text-sm    { font-size: var(--peak-text-sm); }
.text-base  { font-size: var(--peak-text-base); }
.text-lg    { font-size: var(--peak-text-lg); }
.text-xl    { font-size: var(--peak-text-xl); }
.text-2xl   { font-size: var(--peak-text-2xl); }
.text-3xl   { font-size: var(--peak-text-3xl); }
.text-4xl   { font-size: var(--peak-text-4xl); }
.text-hero  { font-size: var(--peak-text-hero); }

/* ---- Weight utilities ----------------------------------------------------- */
.text-regular { font-weight: var(--peak-weight-regular); }
.text-medium  { font-weight: var(--peak-weight-medium); }
.text-semi    { font-weight: var(--peak-weight-semi); }
.text-bold    { font-weight: var(--peak-weight-bold); }

/* ---- Eyebrow / section-label pattern --------------------------------------
 * The small uppercase blue labels that introduce a section ("MENU",
 * "ASK US ANYTHING", "GET IN TOUCH", "TECHNOLOGIES BEHIND"). Previously
 * each instance had its own ad-hoc font-size + letter-spacing + weight
 * combination. Single shared rule replaces 5+ duplicates.
 */
.pp-label {
  font-size: var(--peak-text-xs);
  font-weight: var(--peak-weight-bold);
  letter-spacing: var(--peak-tracking-label);
  text-transform: uppercase;
  color: var(--peak-blue-soft);
  line-height: var(--peak-leading-tight);
}

/* Variant: monospace eyebrow used by .pp-rail-card__label and similar */
.pp-label--mono {
  font-family: var(--peak-font-mono);
  font-size: var(--peak-text-2xs);
  letter-spacing: var(--peak-tracking-mono);
  font-weight: var(--peak-weight-bold);
  text-transform: uppercase;
  color: var(--peak-blue-soft);
}

/* ---- Link focus indicators ------------------------------------------------
 * Site-wide focus policy using :focus-visible (WCAG-compliant pattern):
 *   - Mouse click on a link → NO focus ring/underline (was creating a
 *     visible blue flash on every click as Olivero's :focus indicator
 *     fired during the moment between click and navigation).
 *   - Keyboard navigation (Tab/Enter) → blue outline ring stays visible
 *     so keyboard-only users still get the required focus indicator.
 *
 * Targets both the browser default outline and any theme-level
 * ::before/::after underline indicators (Olivero applies these on
 * .primary-nav__menu-link-inner). */
a:focus:not(:focus-visible),
a:active:not(:focus-visible) {
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

a:focus:not(:focus-visible)::before,
a:focus:not(:focus-visible)::after,
a:active:not(:focus-visible)::before,
a:active:not(:focus-visible)::after {
  display: none !important;
  content: none !important;
  background: none !important;
  transform: none !important;
}

a:focus-visible {
  outline: 2px solid var(--peak-blue-soft);
  outline-offset: 2px;
  border-radius: 2px;
}