/* ============================================================
   evia · Base element styles + utility primitives
   Opt-in, lightweight. Sets the dark canvas, brand type defaults,
   selection color, focus ring, and a few reusable brand classes.
   ============================================================ */

.evia, .evia-surface {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.evia ::selection { background: var(--selection-bg); color: var(--selection-fg); }

.evia h1, .evia h2, .evia h3, .evia h4 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  color: var(--text-primary);
  margin: 0;
}
.evia h1 { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
.evia h2 { font-size: var(--text-3xl); }
.evia h3 { font-size: var(--text-2xl); }
.evia h4 { font-size: var(--text-xl); }
.evia p  { margin: 0 0 1em; color: var(--text-secondary); }
.evia a  { color: var(--link); text-decoration: none; }
.evia a:hover { text-decoration: underline; }

/* ---- Brand utility classes ---------------------------------- */
.evia-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}

.evia-subline {
  font-family: var(--subline-font);
  font-weight: var(--subline-weight);
  letter-spacing: var(--subline-tracking);
  text-transform: var(--subline-transform);
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.evia-mono { font-family: var(--font-mono); }

/* Accent text — the lime is reserved; never run long copy in it */
.evia-accent { color: var(--accent); }

:where(.evia) :focus-visible {
  outline: none;
  box-shadow: var(--glow-accent);
  border-radius: var(--radius-xs);
}