/* ==========================================================================
   base.css — MR ANALYSIS 360 DESIGN SYSTEM
   --------------------------------------------------------------------------
   Element defaults plus the sanctioned typography hierarchy:
     H1 · H2 · H3 · H4 · Lead · Body · Small · Caption · Eyebrow
   Each level exists twice: as an element rule (so semantic HTML is correct with
   no classes at all) and as a reusable class (so the same level can be applied
   to a <p>, <span> or <div> when the semantics demand it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography hierarchy
   -------------------------------------------------------------------------- */
h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  text-wrap: balance;
}

h3,
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  text-wrap: balance;
}

h4,
.h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
}

h5,
.h5 {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

h6,
.h6 {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* Lead — the standfirst directly under a heading */
.lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: var(--measure-wide);
}

/* Body — the default paragraph treatment */
.body,
p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.small {
  font-size: var(--text-small);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Size utilities
   The page markup reaches for three shorthand steps. They set SIZE ONLY and
   never a colour, so the same class is safe on a paper band and on an ink band
   alike. Anything that needs a colour uses a semantic class instead.
   -------------------------------------------------------------------------- */
.text-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.text-body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
}

/* Eyebrow — the uppercase micro-label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.eyebrow--muted {
  color: var(--color-text-muted);
}

.eyebrow--inverse {
  color: var(--color-text-inverse-muted);
}

/* --------------------------------------------------------------------------
   Inline text
   -------------------------------------------------------------------------- */
a {
  color: var(--color-text-accent);
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-accent-hover);
}

/* A standalone inline link that must be unmistakable at a glance */
.link {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-accent-soft-border);
  transition: var(--transition-colors);
}

.link:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}

/* Numerals align in columns — essential for an analytics brand */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   Prose block — caps line length for long-form copy
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--flow-space);
}

/* --------------------------------------------------------------------------
   Focus — one visible mechanism, applied globally and never removed
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-focus);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-xs);
}

/* Pointer users do not get the ring; keyboard users always do */
:focus:not(:focus-visible) {
  outline: none;
}

/* Keep in-page anchors clear of the sticky header */
[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

/* --------------------------------------------------------------------------
   Skip link — the first focusable element on every page
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-accent-contrast);
}

/* --------------------------------------------------------------------------
   Selection, scrollbar and motion preferences
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-border-input);
}

/* Smooth scrolling only for visitors who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}