@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* =====================================================================
   SuperA Fotografia — Design System
   Tema "SuperA Warm" (paleta quente: vermelho profundo + creme).
   Tokens do tema mapeados para os nomes usados nos componentes.
   ===================================================================== */
:root {
  /* Tokens do tema */
  --background: hsl(24 33% 97%);
  --foreground: hsl(0 0% 10%);
  --card: hsl(24 33% 97%);
  --primary: hsl(0 56% 39%);
  --secondary: hsl(43 91% 92%);
  --secondary-foreground: hsl(40 100% 25%);
  --muted: hsl(22 21% 93%);
  --muted-foreground: hsl(33 5% 32%);
  --accent: hsl(48 96% 89%);
  --accent-foreground: hsl(0 63% 31%);
  --destructive: hsl(0 70% 35%);
  --border: hsl(38 64% 89%);

  /* Mapeamento para os nomes históricos dos componentes */
  --primary-color: var(--primary);
  --primary-dark: hsl(0 63% 31%);
  --primary-rgb: 166, 44, 44;            /* p/ tints translúcidos */
  --text-color: var(--foreground);
  --text-color-secondary: var(--muted-foreground);
  --surface-0: var(--card);              /* cards — creme claro */
  --surface-50: hsl(24 24% 94%);         /* fundo da página — um tom abaixo */
  --surface-100: var(--muted);
  --surface-200: var(--border);
  --surface-300: hsl(38 40% 80%);
  --footer-bg: hsl(24 10% 12%);          /* rodapé escuro quente */
  --success: #15803d;
  --danger: var(--destructive);

  --font-family: 'Poppins', sans-serif;
  --font-serif: 'Libre Baskerville', Georgia, serif;
  --radius-button: 0.375rem;
  --radius-card: 0.5rem;

  --shadow-soft: 1px 4px 16px -2px hsl(0 63% 18% / 0.12);
  --shadow-card: 1px 1px 12px -3px hsl(0 63% 18% / 0.10);
  --transition: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body {
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--text-color);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-color); }

/* ---- Botões ---- */
.btn {
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--radius-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition), opacity var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-outline { background: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline:hover:not(:disabled) { background: rgba(219, 58, 49, 0.06); }
.btn-ghost { background: transparent; color: var(--text-color); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-100); }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* ---- Inputs ---- */
.field { margin-bottom: 16px; text-align: left; }
.field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; color: var(--text-color); }
.input {
  width: 100%;
  font-family: var(--font-family);
  font-size: 0.95rem;
  padding: 11px 14px;
  border: 1.5px solid var(--surface-200);
  border-radius: var(--radius-button);
  color: var(--text-color);
  background: var(--surface-0);
  transition: border-color var(--transition);
}
.input:focus { outline: none; border-color: var(--primary-color); }

/* ---- Cards ---- */
.card {
  background: var(--surface-0);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--surface-200);
}

/* ---- Badges de status ---- */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.badge-draft { background: var(--surface-200); color: var(--text-color-secondary); }
.badge-published { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.badge-archived { background: rgba(107, 114, 128, 0.15); color: var(--text-color-secondary); }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--footer-bg);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  font-size: 0.9rem;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ---- Utilitários ---- */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.muted { color: var(--text-color-secondary); }
.center { text-align: center; }

/* Ícones de linha (SVG inline) */
.ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.ic-lg { width: 1.5em; height: 1.5em; }
.btn .ic { vertical-align: -0.18em; }