/* leoleles.com — base e componentes da casa (só tokens; nada de hex solto). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: var(--link); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow::before { content: ""; width: 12px; height: 3px; background: var(--accent); border-radius: 1px; }
.titulo-sub::after { content: ""; display: block; width: 40px; height: 3px; background: var(--accent); margin-top: 8px; border-radius: 1px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nota { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* marca: a estrela é a identidade; o nome vai em Poppins */
.marca { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; }
.marca .estrela { width: 0.85em; height: 0.85em; color: var(--estrela); flex: none; }

/* botões (D2 da casa: primário PRETO; teal nunca é ação) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); min-height: 40px; padding: 0 calc(var(--u) * 4); border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--action-secondary-fg); font-family: var(--font-display); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; user-select: none; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.btn { border-color: var(--action-secondary-border); }
.btn:hover { background: var(--action-secondary-bg-hover); }
.btn.primario { background: var(--action-primary-bg); color: var(--action-primary-fg); border-color: transparent; }
.btn.primario:hover { background: var(--action-primary-bg-hover); }
.btn.discreto { border-color: transparent; color: var(--action-ghost-fg); }
.btn.discreto:hover { background: var(--action-ghost-bg-hover); color: var(--action-ghost-fg-hover); }
.btn.perigo { background: var(--action-danger-bg); color: var(--action-danger-fg); border-color: transparent; }
.btn.destaque { background: var(--yellow); color: var(--yellow-on); border-color: transparent; }
.btn.destaque:hover { background: var(--amber); }
.btn.perigo:hover { background: var(--action-danger-bg-hover); }
.btn.grande { min-height: 48px; padding: 0 calc(var(--u) * 5); font-size: 15px; }
.btn.largo { width: 100%; }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn.google svg { width: 18px; height: 18px; }
.btn.pill { border-radius: var(--radius-full); }

/* cartões: separam por fio, não por sombra */
.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* campos: inset sutil, foco teal */
.campo { display: grid; gap: calc(var(--u) * 1.5); }
.campo label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.campo input, .campo select, .campo textarea, input.campo-simples, select.campo-simples {
  font: inherit; font-size: 14px; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); min-height: 40px; padding: 0 calc(var(--u) * 3); box-shadow: var(--shadow-input-inset); width: 100%;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.campo input::placeholder, input.campo-simples::placeholder { color: var(--text-muted); }
.campo input:hover:not(:focus), input.campo-simples:hover:not(:focus) { border-color: var(--border-strong); }
.campo input:focus, .campo select:focus, input.campo-simples:focus, select.campo-simples:focus { outline: none; border-color: var(--focus-ring-color); box-shadow: var(--shadow-input-inset), var(--shadow-focus); }

/* etiquetas de status: pastel + texto escuro */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: var(--radius-full); background: var(--gray-1-5); color: var(--gray-5); }
.tag.contorno { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.tag.bom { background: color-mix(in srgb, var(--success) 70%, transparent); color: var(--success-fg); }
.tag.alerta { background: color-mix(in srgb, var(--error) 70%, transparent); color: var(--error-fg); }
.tag.espera { background: color-mix(in srgb, var(--paused) 70%, transparent); color: var(--paused-fg); }
.tag.andamento { background: color-mix(in srgb, var(--in-progress) 70%, transparent); color: var(--in-progress-fg); }
.tag.teal { background: color-mix(in srgb, var(--fill-1) 14%, transparent); color: var(--fill-1-fg); }
.tag.voce { background: var(--accent-pale); color: var(--accent-fg); }

/* avisos */
.aviso { border-left: 3px solid var(--accent); background: var(--accent-pale); padding: calc(var(--u) * 2.5) calc(var(--u) * 3.5); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); font-size: 13px; }
.aviso.info { border-left-color: var(--dado); background: color-mix(in srgb, var(--fill-0) 60%, transparent); }
.aviso.erro { border-left-color: var(--error); background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error-fg); }
.aviso.espera { border-left-color: var(--paused); background: color-mix(in srgb, var(--paused) 40%, transparent); color: var(--paused-fg); }