/* Base de OVO Academy — consume tokens.css. NUNCA usar valores sueltos. */

a { color: inherit; }

.btn {
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium);
  border-radius: var(--r-md); padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent; transition: var(--transition);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.btn-primary { background: var(--ink-900); color: #fff; }
.btn-primary:hover { background: #000; }  /* negro puro en hover, segun la guia de diseno */
.btn-secondary { background: var(--surface); color: var(--ink-900); border-color: var(--line-strong); }

:focus-visible { outline: 3px solid rgba(10, 132, 255, 0.45); outline-offset: 2px; }

.app-shell { max-width: var(--content-max); margin: 0 auto; padding: var(--s-8); }