/* src/styles/base.css */
/* =====================================
   Base element styles
   Applies semantic tokens to HTML elements
   ===================================== */

/* Document */
html {
  background: var(--surface-canvas);
  color: var(--text-default);
  font-family: var(--type-body-font-family);
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  font-weight: var(--type-body-font-weight);
  text-decoration: var(--type-body-text-decoration);
}

/* --------------------------------------
   Editorial defaults
   ------------------------------------- */

/* Paragraphs */
p {
  margin: 0;
}

/* Vertical rhythm */
p + p {
  margin-top: var(--spacing-16);
}

/* --------------------------------------
   Headings
   ------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-default);
}
h1 {
  font-family: var(--type-h1-font-family);
  font-weight: var(--type-h1-font-weight);
  font-size: var(--type-h1-font-size);
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
  text-decoration: var(--type-h1-text-decoration);
}
h2 {
  font-family: var(--type-h2-font-family);
  font-weight: var(--type-h2-font-weight);
  font-size: var(--type-h2-font-size);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  text-decoration: var(--type-h2-text-decoration);
}
h3 {
  font-family: var(--type-h3-font-family);
  font-weight: var(--type-h3-font-weight);
  font-size: var(--type-h3-font-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
  text-decoration: var(--type-h3-text-decoration);
}
h4 {
  font-family: var(--type-h4-font-family);
  font-weight: var(--type-h4-font-weight);
  font-size: var(--type-h4-font-size);
  line-height: var(--type-h4-line-height);
  letter-spacing: var(--type-h4-letter-spacing);
  text-decoration: var(--type-h4-text-decoration);
}

/* Navbar brand should match heading / H3 from figma */
.navbar__brand {
  font-family: var(--type-h3-font-family);
  font-weight: var(--type-h3-font-weight);
  font-size: var(--type-h3-font-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
  text-decoration: none;
  color: var(--text-default);
}
/* Give headings breathing room when they precede text */
h1 + p,
h2 + p,
h3 + p,
h4 + p {
  margin-top: var(--spacing-16);
}

/* --------------------------------------
    Meta / small text
   ------------------------------------- */
small {
  font-family: var(--type-caption-font-family);
  font-weight: var(--type-caption-font-weight);
  font-size: var(--type-caption-font-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-decoration: var(--type-caption-text-decoration);
}

/* Links — neutralized (temporary): no hover/active styling */
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------
   Selection + Focus
   ------------------------------------- */

::selection {
  background: var(--surface-overlay-active);
  color: var(--text-inverse);
}
:focus-visible {
  outline: var(--border-width-2) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Utility: screen-reader only (visually hidden but accessible) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}