/* ============================================================================
   NAVIK ANALYTICS — BASE
   Reset, element defaults, and typographic rhythm.
   Depends on tokens.css. Contains no component styles.
   ============================================================================ */

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header so anchor targets are not hidden beneath it. */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* --- Headings -------------------------------------------------------------
   Tracking tightens and leading closes as size increases — optically
   necessary, since letterfit that reads correct at 17px reads loose at 80px.

   WEIGHT IS 400 AND MUST STAY 400. Instrument Serif ships a single weight; ask
   for 600 and the browser synthesises a fake bold, which smears the stroke
   contrast the face is built on. Emphasis in this system comes from SIZE,
   ITALIC or COLOUR — never from weight. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  text-wrap: balance;
}

/* The italic is a change of voice, not decoration. It is how a headline turns
   from statement to aside without needing a second element. */
h1 em,
h2 em,
h3 em,
h4 em {
  font-style: italic;
  color: var(--text-accent);
}

h1 {
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
}

h4 {
  font-size: var(--text-h4);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
}

/* --- Links ----------------------------------------------------------------
   Inline prose links are underlined. Underline is the accessibility contract:
   colour alone must never be the only signal. Navigation and buttons opt out. */

a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

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

/* --- Focus ---------------------------------------------------------------
   One visible focus treatment across the whole site. :focus-visible only, so
   mouse users never see it but keyboard users always do. */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--petrol-100);
  color: var(--ink-900);
}

.surface-inverse ::selection {
  background-color: var(--petrol-800);
  color: var(--paper-0);
}

/* --- Numerals -------------------------------------------------------------
   Every figure on this site — metrics, scores, dates, table columns — uses the
   numeric face with tabular lining figures so digits align vertically across
   rows and do not jitter when a value animates. */

.numeric,
[data-numeric] {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--tracking-normal);
}

/* --- Typographic utilities ------------------------------------------------ */

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* The reference voice. Rationed to genuine references — exhibit captions,
   question indices. See the note in tokens.css before reaching for it. */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.text-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-accent {
  color: var(--text-accent);
}

/* Constrains prose to a readable measure. Applied to any long-form column. */
.measure {
  max-width: var(--measure);
}

.measure-tight {
  max-width: 56ch;
}

/* --- Accessibility helpers ------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users land here first; it reveals itself only on focus. */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background-color: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(-100% - var(--space-5)));
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}