/**
 * base.css — Novagroup Base Styles
 * Typography defaults, body, links, focus rings, selection, headings.
 * ALL values reference tokens from css/tokens.css — no hard-coded literals.
 *
 * Load order: tokens.css → reset.css → fonts.css → base.css
 */

/* ============================================================
 * ROOT / SCHEME
 * ============================================================ */
:root {
  color-scheme: light;
}

/* ============================================================
 * BODY
 * ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--c-ink);
  background-color: var(--c-bone-deep); /* section ground — white cards now separate with a real delta (#7) */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============================================================
 * HEADINGS
 * All headings default to Fraunces serif; pages override weight as needed.
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-navy);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: var(--fs-h4); font-weight: 500; letter-spacing: var(--tracking-normal); }
h5, h6 {
  font-size: var(--fs-small);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* ============================================================
 * BODY TEXT
 * ============================================================ */
p {
  max-width: 72ch;
  line-height: var(--leading-body);
  color: var(--c-ink);
}

p + p {
  margin-top: var(--sp-3);
}

/* ============================================================
 * LINKS
 * Default link style — underline draw on hover.
 * Component-level links override this (button.css, nav.css, etc.)
 * ============================================================ */
a {
  color: var(--c-copper-text); /* AA-safe copper for text on light (5.53:1); hover brightens (#3) */
  text-decoration: none;
  position: relative;
  transition: color var(--dur-short) var(--ease-out);
}

a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--c-copper-bright);
  transition: width var(--dur-short) var(--ease-out);
}

a:hover {
  color: var(--c-copper-bright);
}

a:hover::after {
  width: 100%;
}

/* No :visited color override on purpose: a:visited (0,1,1) outranks the nav/footer
 * link rules (e.g. .site-nav__link, 0,1,0) and would bleed copper into the
 * white-on-dark nav links once a page has been visited. Links keep their
 * contextual color whether visited or not. */

/* ============================================================
 * FOCUS VISIBLE  (keyboard navigation — WCAG AA)
 * ============================================================ */
:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
 * TEXT SELECTION
 * ============================================================ */
::selection {
  background-color: var(--c-navy);
  color: var(--c-white);
}

/* ============================================================
 * EYEBROW  (utility class for pre-heading labels)
 * ============================================================ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-copper-text); /* AA-safe on light (#3) */
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* Shared eyebrow signature: a short copper hairline before the label, so
 * hierarchy survives desaturation/colour-blindness instead of relying on
 * copper colour alone. Reuses the copper hairline motif from card bullets.
 * (id:eyebrow-color-only-hierarchy) */
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background-color: var(--c-copper); /* decorative hairline keeps the brighter copper */
  flex: 0 0 auto;
}

/* Centered variant — keeps the block centered with a rule flanking each side */
.eyebrow--centered {
  justify-content: center;
}

.eyebrow--centered::after {
  content: '';
  width: 28px;
  height: 1px;
  background-color: var(--c-copper);
  flex: 0 0 auto;
}

/* ============================================================
 * LISTS
 * ============================================================ */
ul:not([class]),
ol:not([class]) {
  padding-left: var(--sp-4);
}

ul:not([class]) {
  list-style: disc;
}

ol:not([class]) {
  list-style: decimal;
}

li {
  margin-bottom: var(--sp-2);
  line-height: var(--leading-body);
}

/* ============================================================
 * BLOCKQUOTE
 * ============================================================ */
blockquote {
  border-left: 2px solid var(--c-copper);
  padding-left: var(--sp-4);
  margin-left: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-navy);
}

/* ============================================================
 * CODE
 * ============================================================ */
code, pre {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: var(--fs-small);
  background-color: var(--c-fog-2);
  border-radius: var(--radius-sm);
}

code {
  padding: 0.1em 0.35em;
}

pre {
  padding: var(--sp-4);
  overflow-x: auto;
}

/* ============================================================
 * HORIZONTAL RULE
 * ============================================================ */
hr {
  border-color: var(--c-fog);
  margin-block: var(--sp-6);
}

/* ============================================================
 * IMAGES
 * ============================================================ */
img {
  height: auto;
}

/* ============================================================
 * UTILITY: TEXT ON DARK SURFACES
 * ============================================================ */
.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark h5,
.on-dark h6 {
  color: var(--c-white);
}

.on-dark p {
  color: var(--c-fog);
}

.on-dark a {
  color: var(--c-copper);
}

/* ============================================================
 * SR-ONLY — visually hidden but available to screen readers (#5)
 * Used for the drawer heading and other off-screen a11y labels.
 * ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * SKIP LINK — a11y, visually hidden until keyboard focus
 * ============================================================ */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-copper);
  color: var(--c-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-small);
  border-bottom-right-radius: var(--radius-sm);
  z-index: 9999;
  transform: translateY(-150%);
  transition: transform var(--dur-short) var(--ease-out);
}

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