/* ==========================================================================
   Exigo Elements — Base
   Minimal element defaults so a bare page (or a specimen card) inherits the
   brand type and colors. Intentionally light — the app scopes most rules
   under #body; here we set sane document-level defaults only.
   ========================================================================== */

html {
  font-size: var(--font-size-root, medium);
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

@media only screen and (max-width: 1024px) {
  html { font-size: var(--font-size-root-mobile, small); }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

::selection { background: var(--Primary-Denim-50); color: var(--Type-Limed-Spruce-500); }

/* Headings default to Proxima Nova semibold, tight tracking */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

/* Utility used by icon <img> elements colored via filter tokens */
.icon-tint-strong  { filter: var(--icon-strong); }
.icon-tint-primary { filter: var(--icon-primary); }
.icon-tint-muted   { filter: var(--icon-muted); }
.icon-tint-danger  { filter: var(--icon-danger); }
.icon-tint-onprimary { filter: var(--icon-on-primary); }