/* ============================================================
   Dynabotics Design System — Base styles (selectors only).
   Depends on tokens.css being loaded first.
   No @import, no @font-face, no :root block in this file.
   ============================================================ */

html, body {
  background: var(--ui-cream-50);
  color: var(--ui-charcoal-900);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--brand-forest-900);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
}

.display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--brand-forest-900);
  letter-spacing: -0.015em;
}
.display-xl { font-size: var(--text-display-xl); line-height: var(--lh-display-xl); }
.display-lg { font-size: var(--text-display-lg); line-height: var(--lh-display-lg); letter-spacing: -0.012em; }
.display-md { font-size: var(--text-display-md); line-height: var(--lh-display-md); letter-spacing: -0.010em; }

h1 { font-size: var(--text-heading-lg); line-height: var(--lh-heading-lg); }
h2 { font-size: var(--text-heading-lg); line-height: var(--lh-heading-lg); }
h3 { font-size: var(--text-heading-md); line-height: var(--lh-heading-md); }
h4 { font-size: var(--text-heading-sm); line-height: var(--lh-heading-sm); }

p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--ui-charcoal-900);
  text-wrap: pretty;
}

.lead { font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--ui-charcoal-900); }
.meta { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); color: var(--ui-stone-500); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-stone-500);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--ui-interactive-primary);
  text-decoration-color: var(--ui-stone-300);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
  color: var(--ui-interactive-primary-hover);
  text-decoration-color: currentColor;
}

hr {
  border: 0;
  border-top: 1px solid var(--ui-stone-200);
  margin: var(--space-6) 0;
}

::selection { background: var(--brand-gold-300); color: var(--brand-forest-900); }

/* Select dropdown — match text input height exactly.
   Remove UA chevron; draw our own via background-image. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 16px;
  height: auto;
  line-height: 1.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%234A463E' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}