/*
 * Datestre — Web Design System
 *
 * Fonte única de visual pras 8 páginas servidas via Firebase Hosting:
 * confessional, julga, desafio, novela, arquetipo, acompanha,
 * privacidade, 404, index. Cada uma importa este CSS e adiciona apenas
 * o que é específico (geralmente nada — ou pequenas variações de
 * conteúdo).
 *
 * Princípios não-negociáveis (extraídos do redesign do confessional):
 *
 *   1. Paleta única — creme/coffee/laranja. Nunca trocar accent por
 *      contexto (o roxo no confessional antigo, teal no acompanha,
 *      ouro no arquetipo) — a marca tem que ser estável quando o user
 *      pula entre páginas via share.
 *   2. Sem emoji em chrome — logo, header, footer, badges. Emoji só
 *      quando carrega dado (status chip, eventualmente).
 *   3. Sem gradient + box-shadow colorido em CTA. Botão primário é
 *      cor sólida coffee, raio 10px.
 *   4. Sem círculos/blobs decorativos pseudo-element. Espaço respira;
 *      a tipografia faz o trabalho de hierarquia.
 *   5. Sem aspas Georgia 32-44px decorativas em quote boxes. O fio
 *      accent à esquerda + Georgia italic já entonam a citação.
 *   6. Animação sutil — UM fadeIn 250ms no card. Sem cascata de
 *      delays Duolingo (.05/.14/.24/.33/.40s).
 *   7. font-weight 700 é o teto pra UI; 600 pra ênfase secundária.
 *      Nunca w900 — gira no sentido "logo de startup 2018".
 *   8. Letter-spacing negativo (-0.1 a -0.4) no body; positivo alto
 *      (1.4-1.6px) só em overlines bem definidos.
 *   9. Box-shadow neutro: rgba(0,0,0, 0.04-0.08). Nada com cor.
 *  10. Inter (sans) + Georgia (serif local). Sem Playfair Display +
 *      DM Sans com 10+ pesos — Inter sozinha cobre todo UI text.
 */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --bg:           #FDFBF9;
  --surface:      #FFFFFF;
  --surface-soft: #F5F0EA;
  --text:         #2D1B14;
  --text-muted:   #7A6A63;
  --text-subtle:  #B5A49D;
  --border:       #EFEAE3;
  --border-soft:  #F5F0EA;
  --accent:       #FF8A3D;
  --accent-soft:  rgba(255, 138, 61, 0.08);
  --danger:       #D64545;
  --success:      #22A06B;

  --radius-sm:    8px;
  --radius-md:    10px;
  --radius-lg:    14px;

  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      20px;
  --space-6:      24px;
  --space-7:      32px;
  --space-8:      40px;
}

/* ── Base ──────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ── Header ────────────────────────────────────────────────────── */
.ds-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ds-logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  text-decoration: none;
  white-space: nowrap;
}
.ds-logo .accent { color: var(--accent); }
.ds-header-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: -0.1px;
  transition: color 0.15s;
}
.ds-header-link:hover { color: var(--text); }

/* ── Container ─────────────────────────────────────────────────── */
.ds-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.ds-container.wide { max-width: 640px; }
.ds-container.narrow { max-width: 440px; }

/* ── Card ──────────────────────────────────────────────────────── */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  margin-bottom: 16px;
  animation: ds-fadeIn 0.25s ease;
}
.ds-card.padded-sm { padding: 22px 22px 20px; }

@keyframes ds-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Overline (small label uppercase) ─────────────────────────── */
.ds-overline {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ds-overline.muted   { color: var(--text-muted); }
.ds-overline.subtle  { color: var(--text-subtle); }
.ds-overline.danger  { color: var(--danger); }
.ds-overline.success { color: var(--success); }

/* ── Headline / Eyebrow / Caption ─────────────────────────────── */
.ds-headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.4px;
}
.ds-headline.lg { font-size: 28px; line-height: 1.2; letter-spacing: -0.6px; }
.ds-headline.sm { font-size: 18px; }

.ds-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  letter-spacing: -0.1px;
}

.ds-caption {
  font-size: 12px;
  color: var(--text-subtle);
  letter-spacing: -0.05px;
}

/* ── Quote editorial — Georgia italic com fio accent ─────────── */
.ds-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.ds-quote.sm { font-size: 15px; }

/* ── Botões ────────────────────────────────────────────────────── */
.ds-btn-primary {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: -0.1px;
  transition: opacity 0.15s, transform 0.05s;
}
.ds-btn-primary:hover  { opacity: 0.9; }
.ds-btn-primary:active { transform: translateY(1px); }
.ds-btn-primary.block  { display: block; width: 100%; text-align: center; }

.ds-btn-secondary {
  display: inline-block;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.1px;
  transition: border-color 0.15s, background 0.15s;
}
.ds-btn-secondary:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Loading + Error ──────────────────────────────────────────── */
.ds-loading, .ds-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  text-align: center;
}
.ds-error { display: none; padding: 32px; }
.ds-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-loading-text {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: -0.1px;
}
.ds-error-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 320px;
  letter-spacing: -0.1px;
}

/* ── Banner / Aviso discreto ──────────────────────────────────── */
.ds-banner {
  border: 1px solid var(--border);
  background: var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: -0.1px;
}
.ds-banner.danger  { background: rgba(214,69,69,0.06); color: var(--danger); border-color: rgba(214,69,69,0.18); }
.ds-banner.success { background: rgba(34,160,107,0.06); color: var(--success); border-color: rgba(34,160,107,0.18); }

/* ── Divider ───────────────────────────────────────────────────── */
.ds-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 18px 0;
}

/* ── Lista editorial (bullets simples) ────────────────────────── */
.ds-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ds-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: -0.1px;
}
.ds-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

/* ── Footer ────────────────────────────────────────────────────── */
.ds-footer {
  text-align: center;
  margin-top: 40px;
  padding: 16px 0 0;
}
.ds-footer-logo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.2px;
  text-decoration: none;
}
.ds-footer-logo .accent { color: var(--accent); }
.ds-footer-tagline {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 4px;
  letter-spacing: 0.1px;
}

/* ── Anon tag (overline final em cards anônimos) ──────────────── */
.ds-anon-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* ── Form básico ──────────────────────────────────────────────── */
.ds-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  letter-spacing: -0.1px;
  transition: border-color 0.15s;
  outline: none;
}
.ds-input:focus { border-color: var(--accent); }
.ds-input::placeholder { color: var(--text-subtle); }

/* ── Acessibilidade ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ds-card     { animation: none; }
  .ds-spinner  { animation-duration: 1.5s; }
  *           { transition: none !important; }
}