/* frontend/shared/css/base.css
 * MARKE — Estilos de base compartilhados por todo o frontend.
 * Depende de variables.css (importar antes deste arquivo).
 * Mobile-first: regras base valem para telas pequenas; media queries
 * ajustam para telas maiores. Ver docs/DESIGN.md.
 */

/* ===== Reset mínimo ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-base);
  color: var(--color-white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

h1, h2, h3, h4 {
  line-height: var(--line-height-tight);
  font-weight: 600;
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* ===== Foco visível (acessibilidade) ===== */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===== Layout utilitário ===== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-wide {
  width: 100%;
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-xl);
}

@media (max-width: 480px) {
  .page-center {
    padding-block: var(--space-md);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ===== Card / superfície elevada ===== */
.card {
  background: var(--color-base-soft);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
}

@media (max-width: 400px) {
  .card {
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--radius-md);
  }
}

/* ===== Logotipo — placeholder (ver docs/DESIGN.md) =====
 * Substitua o src de .brand-logo img pela imagem real da marca.
 * Nunca gerar o logo como SVG/canvas — sempre <img>. */
.brand-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.brand-logo img {
  height: 32px;
  width: auto;
}
.brand-logo span {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ===== Formulários ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.field label {
  font-size: var(--font-size-sm);
  color: var(--color-white-soft);
}

.field input,
.field textarea,
.field select {
  background: var(--color-base-softer);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-white-faint);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.field-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

/* ===== Botões ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  color: #000000;
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-base-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-base-softer);
}

.btn-block {
  width: 100%;
}

/* ===== Alertas / mensagens de erro ===== */
.alert {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.alert-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1px solid rgba(255, 107, 107, 0.32);
}

/* Reaproveita as variáveis de acento já existentes (nenhuma cor nova) —
   usado para mensagens de sucesso/confirmação (ex.: recuperação de
   senha). */
.alert-success {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border: 1px solid var(--color-base-border-strong);
}

.alert[hidden] {
  display: none;
}

/* ===== Texto utilitário ===== */
.text-muted {
  color: var(--color-white-soft);
}
.text-center {
  text-align: center;
}
.text-sm {
  font-size: var(--font-size-sm);
}

/* ===== Ícones (biblioteca via CDN — ver docs/DESIGN.md) =====
 * Nunca SVG/canvas desenhado à mão. Ícones usam classes da biblioteca
 * carregada no <head> de cada página, ex.: <i class="fa-solid fa-user"></i> */
.icon {
  font-size: 1.1em;
  line-height: 1;
}

/* ===== Responsividade — telas maiores ===== */
@media (min-width: 640px) {
  .page-center {
    padding-block: var(--space-2xl);
  }
  .container {
    padding-inline: var(--space-lg);
  }
}

/* ===== Modo claro (público) — docs/DESIGN.md / DECISIONS.md, parte 13 =====
 * Causa raiz do "tudo verde": este arquivo só tinha modo escuro, aplicado
 * também a páginas públicas/institucionais que deveriam ser claras (igual
 * ao tema real de frontend/marketplace/css/style.css). <body
 * class="theme-light"> ativa este bloco nas páginas de
 * frontend/marketplace/ (company.html), frontend/auth/,
 * frontend/onboarding/, frontend/sales/ e frontend/customer/ — nunca em
 * frontend/admin/, frontend/admin-empresa/ ou frontend/apps/{niche}/, que
 * continuam no modo escuro (painéis operacionais autenticados).
 * Reaproveita a mesma estrutura de .card/.field/.btn/.alert acima — só os
 * tokens de cor mudam, nunca a lógica dos componentes. */

body.theme-light {
  background: #ffffff;
  color: #000000;
}

body.theme-light a {
  color: #000000;
}
body.theme-light a:hover,
body.theme-light a:focus-visible {
  color: #000000;
}

body.theme-light .card {
  background: var(--color-surface-soft);
  border-color: var(--color-border-light);
}

body.theme-light .field label {
  color: var(--color-text-soft);
}

body.theme-light .field input,
body.theme-light .field textarea,
body.theme-light .field select {
  background: var(--color-surface);
  border-color: var(--color-border-light-strong);
  color: var(--color-text);
}

body.theme-light .field input::placeholder,
body.theme-light .field textarea::placeholder {
  color: var(--color-text-faint);
}

/* .btn-primary (fundo lima + texto verde-escuro) já funciona igual em
   fundo claro ou escuro — nenhum ajuste necessário, ver docs/DESIGN.md. */

body.theme-light .btn-secondary {
  color: var(--color-text);
  border-color: var(--color-border-light-strong);
}
body.theme-light .btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-soft);
}

body.theme-light .alert-success {
  background: var(--color-accent-soft);
  color: var(--color-base);
  border-color: var(--color-border-light-strong);
}

body.theme-light .text-muted {
  color: var(--color-text-soft);
}

/* Logo: logo-placeholder.png é a versão clara (para fundo escuro,
 * modo padrão). No modo claro, troca para a versão escura via CSS
 * `content` — nenhuma página HTML referencia o arquivo escuro
 * diretamente, então nenhuma tela pode "esquecer" de trocar (ver
 * docs/DECISIONS.md, parte 15, e docs/DESIGN.md). */
body.theme-light .brand-logo img {
  content: url("../assets/logo-placeholder-light.png");
}


/* panel form polish */
.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-white-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
}
.stack > * + * {
  margin-top: var(--space-md);
}
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}
.alert-danger {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ffb4b4;
}
.alert-success {
  background: rgba(202, 250, 4, 0.1);
  border: 1px solid rgba(202, 250, 4, 0.3);
  color: var(--color-accent);
}