/* CodeArtisans — biblioteca de componentes v1. Requer tokens.css. Dark-first. */

/* ---------- base de página ---------- */
.ca-page {
  background: var(--ca-carvao);
  color: var(--ca-marfim);
  font-family: var(--ca-font-text);
  font-size: var(--ca-text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- tipografia ---------- */
.ca-h1 {
  font-family: var(--ca-font-display);
  font-weight: 300;
  font-size: var(--ca-text-h1);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ca-h1 em, .ca-h2 em {
  font-style: normal;
  font-weight: 500;
  color: var(--ca-cobre-claro);
}
.ca-h2 {
  font-family: var(--ca-font-display);
  font-weight: 300;
  font-size: var(--ca-text-h2);
  line-height: 1.25;
  text-wrap: balance;
}
.ca-h3 {
  font-family: var(--ca-font-display);
  font-weight: 500;
  font-size: var(--ca-text-h3);
  line-height: 1.35;
}
.ca-body { max-width: 65ch; }
.ca-small { font-size: var(--ca-text-small); color: var(--ca-grafite); }
.ca-label {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-label);
  letter-spacing: var(--ca-tracking-label);
  text-transform: uppercase;
  color: var(--ca-grafite);
}
.ca-link {
  color: var(--ca-marfim);
  text-decoration: underline;
  text-decoration-color: var(--ca-cobre);
  text-underline-offset: 3px;
  transition: color var(--ca-transition);
}
.ca-link:hover { color: var(--ca-cobre-claro); }

/* ---------- botões ---------- */
.ca-btn {
  font-family: var(--ca-font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: 9px 16px;
  border-radius: var(--ca-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ca-transition), color var(--ca-transition), border-color var(--ca-transition);
}
.ca-btn:focus-visible { outline: var(--ca-focus); outline-offset: 2px; }
.ca-btn:disabled { opacity: .45; cursor: not-allowed; }
.ca-btn--solid { background: var(--ca-cobre); color: #1A120B; }
.ca-btn--solid:hover:not(:disabled) { background: var(--ca-cobre-claro); }
.ca-btn--ghost { background: transparent; border-color: var(--ca-cobre-escuro); color: var(--ca-cobre-claro); }
.ca-btn--ghost:hover:not(:disabled) { border-color: var(--ca-cobre); color: var(--ca-marfim); }
.ca-btn--quiet { background: transparent; color: var(--ca-grafite); }
.ca-btn--quiet:hover:not(:disabled) { color: var(--ca-marfim); }
.ca-btn--lg { font-size: 13px; padding: 13px 24px; }

/* ---------- chips ---------- */
.ca-chip {
  font-family: var(--ca-font-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--ca-radius-pill);
  border: 1px solid var(--ca-linha);
  color: var(--ca-grafite);
}
.ca-chip--active { border-color: var(--ca-cobre-escuro); color: var(--ca-cobre-claro); }

/* ---------- formulário ---------- */
.ca-field { display: flex; flex-direction: column; gap: var(--ca-space-2); }
.ca-input, .ca-textarea, .ca-select {
  font-family: var(--ca-font-mono);
  font-size: 12.5px;
  color: var(--ca-marfim);
  background: var(--ca-breu-fundo);
  border: 1px solid var(--ca-linha);
  border-radius: var(--ca-radius-sm);
  padding: 10px 12px;
  transition: border-color var(--ca-transition);
}
.ca-input::placeholder, .ca-textarea::placeholder { color: var(--ca-grafite); }
.ca-input:focus, .ca-textarea:focus, .ca-select:focus {
  outline: none;
  border-color: var(--ca-cobre);
}
.ca-input[aria-invalid="true"], .ca-textarea[aria-invalid="true"] { border-color: var(--ca-erro); }
.ca-field__hint { font-size: 12px; color: var(--ca-grafite); }
.ca-field__error { font-size: 12px; color: var(--ca-erro); }

/* ---------- superfícies ---------- */
.ca-card {
  background: var(--ca-breu);
  border: 1px solid var(--ca-linha-suave);
  border-radius: var(--ca-radius-md);
  padding: var(--ca-space-6);
}
.ca-card--raised { box-shadow: var(--ca-shadow-card); }
.ca-divider { border: 0; border-top: 1px solid var(--ca-linha-suave); }

/* ---------- feedback ---------- */
.ca-alert {
  display: flex;
  gap: var(--ca-space-3);
  padding: var(--ca-space-3) var(--ca-space-4);
  border-radius: var(--ca-radius-sm);
  border: 1px solid var(--ca-linha);
  background: var(--ca-breu);
  font-size: 13.5px;
}
.ca-alert--ok { border-color: var(--ca-ok); }
.ca-alert--alerta { border-color: var(--ca-alerta); }
.ca-alert--erro { border-color: var(--ca-erro); }

.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ca-font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ca-grafite);
}
.ca-badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ca-grafite);
}
.ca-badge--ok::before { background: var(--ca-ok); }
.ca-badge--alerta::before { background: var(--ca-alerta); }
.ca-badge--erro::before { background: var(--ca-erro); }

/* ---------- tabela ---------- */
.ca-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ca-table th {
  font-family: var(--ca-font-mono);
  font-size: var(--ca-text-label);
  letter-spacing: var(--ca-tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ca-grafite);
  text-align: left;
  padding: var(--ca-space-2) var(--ca-space-3);
  border-bottom: 1px solid var(--ca-linha);
}
.ca-table td {
  padding: var(--ca-space-3);
  border-bottom: 1px solid var(--ca-linha-suave);
  font-variant-numeric: tabular-nums;
}

/* ---------- navegação ---------- */
.ca-nav {
  display: flex;
  align-items: center;
  gap: var(--ca-space-6);
  padding: var(--ca-space-4) 0;
  border-bottom: 1px solid var(--ca-linha-suave);
}
.ca-nav__links {
  display: flex;
  gap: var(--ca-space-4);
  margin-left: auto;
  font-family: var(--ca-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.ca-nav__links a { color: var(--ca-grafite); text-decoration: none; transition: color var(--ca-transition); }
.ca-nav__links a:hover, .ca-nav__links a[aria-current="page"] { color: var(--ca-cobre-claro); }