:root {
  --cream: #ede8dc;
  --cream-light: #f5f0e8;
  --espresso: #1a1612;
  --terracotta: #c8440a;
  --terracotta-dark: #a93a09;
  --warm-brown: #5c5244;
  --tan: #8b7355;
  --border: rgba(26, 22, 18, 0.1);
  --success: #258344;
  --danger: #b42318;
  --warning: #9a6500;

  --bg: var(--cream);
  --surface: var(--cream-light);
  --accent: var(--terracotta);
  --text: var(--espresso);
  --muted: var(--tan);
  --green: var(--success);
  --red: var(--danger);
}

body {
  background: var(--cream) !important;
  color: var(--espresso) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

a {
  color: var(--terracotta);
}
a:hover {
  color: var(--espresso);
}

.logo,
.nav-logo {
  color: var(--espresso) !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}

.logo span,
.nav-logo span,
.card-header h1 span,
footer .logo span {
  color: var(--terracotta) !important;
}

.card,
.price-card,
.plan-opt,
.stat-card,
.platform-card,
.topbar,
.sidebar,
.toast,
footer {
  background: var(--cream-light) !important;
  border-color: var(--border) !important;
  color: var(--espresso) !important;
}

.card,
.plan-opt,
.stat-card,
.platform-card,
.toast {
  box-shadow: 0 16px 48px rgba(26, 22, 18, 0.08) !important;
}

.auth-page .card-header {
  background: var(--espresso) !important;
  color: #fff !important;
}

.auth-page .card-header h1 {
  color: #fff !important;
}

.card-header p,
.sub,
.updated,
.card-footer,
.back-link,
.back-link a,
.step-label,
.perks,
.health,
.key-meta,
.account-platform,
.post-time,
.empty,
.stat-label,
.platform-status,
.nav-links a,
footer .links a,
footer .copy {
  color: var(--tan) !important;
}

h1,
h2,
h3,
.card-title,
.key-name,
.account-name,
.stat-value,
.platform-name,
.post-content,
.plan-opt .name,
.plan-opt .price,
strong {
  color: var(--espresso) !important;
}

label,
.section-label {
  color: var(--warm-brown) !important;
}

input,
select,
textarea,
.api-key-box,
.publish-result,
pre {
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--espresso) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 3px rgba(200, 68, 10, 0.12) !important;
}

.btn,
.btn-outline,
.btn-ghost,
.btn-magic,
.platform-connect-btn.connect,
.btn-connect,
.copy-btn,
#signout-btn,
.sidebar a,
.nav-item {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--warm-brown) !important;
  border-radius: 6px !important;
}

.btn:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-magic:hover,
.platform-connect-btn.connect:hover,
.btn-connect:hover,
.copy-btn:hover,
#signout-btn:hover,
.sidebar a:hover,
.sidebar a.active,
.nav-item:hover,
.nav-item.active {
  background: rgba(200, 68, 10, 0.08) !important;
  border-color: rgba(200, 68, 10, 0.22) !important;
  color: var(--espresso) !important;
}

.btn-primary,
.btn-plan-fill,
.step.active .step-num,
.plan-opt.selected,
#bsky-submit-btn,
#discord-submit-btn {
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-plan-fill:hover,
#bsky-submit-btn:hover,
#discord-submit-btn:hover {
  background: var(--terracotta-dark) !important;
  border-color: var(--terracotta-dark) !important;
}

#platform-grid button {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--espresso) !important;
}

#platform-grid button:hover {
  border-color: rgba(200, 68, 10, 0.28) !important;
}

.plan-opt.selected {
  box-shadow: 0 0 0 3px rgba(200, 68, 10, 0.12) !important;
}

.plan-opt.selected .name,
.plan-opt.selected .price,
.plan-opt.selected .price span,
.plan-opt.selected .perks {
  color: #fff !important;
}

.step-num {
  background: rgba(26, 22, 18, 0.08) !important;
  color: var(--tan) !important;
}

.step.done .step-num,
.badge-green,
.platform-card.connected,
.platform-connect-btn.connected,
.alert-success,
.publish-result.ok,
.new-key-banner {
  background: rgba(37, 131, 68, 0.12) !important;
  border-color: rgba(37, 131, 68, 0.28) !important;
  color: var(--success) !important;
}

.alert-error,
.publish-result.error,
.badge-red {
  background: rgba(180, 35, 24, 0.1) !important;
  border-color: rgba(180, 35, 24, 0.26) !important;
  color: var(--danger) !important;
}

.badge,
.badge-blue,
.badge-yellow {
  background: rgba(26, 22, 18, 0.06) !important;
  color: var(--warm-brown) !important;
}

.divider::before,
.divider::after,
.step::after,
th,
td,
.key-row,
.account-row,
.post-row {
  border-color: var(--border) !important;
}

th {
  color: var(--tan) !important;
}

.topbar {
  border-bottom: 1px solid var(--border) !important;
}

.sidebar {
  border-right: 1px solid var(--border) !important;
}

.nav-item.active {
  border-left-color: var(--terracotta) !important;
}

.logo {
  font-weight: 800 !important;
}

.dot {
  background: var(--success) !important;
}

.dot.red {
  background: var(--danger) !important;
}

.spinner {
  border-color: rgba(26, 22, 18, 0.12) !important;
  border-top-color: var(--terracotta) !important;
}

.platform-card {
  background: #fff !important;
}

.platform-card:hover {
  background: var(--cream-light) !important;
  border-color: rgba(200, 68, 10, 0.28) !important;
}

.platform-connect-btn.connect {
  color: var(--terracotta) !important;
}

#user-chip {
  background: rgba(26, 22, 18, 0.06) !important;
  border-color: var(--border) !important;
  color: var(--warm-brown) !important;
}

#publish-preview {
  background: var(--espresso) !important;
  border-color: var(--border) !important;
}

#bluesky-modal,
#discord-modal,
#form-modal {
  background: rgba(26, 22, 18, 0.38) !important;
}

#bluesky-modal > div,
#discord-modal > div,
#form-modal > div {
  background: var(--cream-light) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 64px rgba(26, 22, 18, 0.18) !important;
}

#bluesky-modal input,
#discord-modal input,
#form-modal input,
#form-modal select,
#form-modal textarea {
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--espresso) !important;
}

#bluesky-modal [style*="color: #fff"],
#discord-modal [style*="color: #fff"],
#form-modal [style*="color: #fff"] {
  color: var(--espresso) !important;
}

#bluesky-modal [style*="color: #888"],
#bluesky-modal [style*="color: #aaa"],
#discord-modal [style*="color: #888"],
#discord-modal [style*="color: #aaa"],
#form-modal [style*="color: #888"],
#form-modal [style*="color: #aaa"] {
  color: var(--tan) !important;
}

#bluesky-modal button[onclick^="close"],
#discord-modal button[onclick^="close"],
#form-modal button[onclick^="close"] {
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--warm-brown) !important;
}

@media (max-width: 720px) {
  .card,
  .content,
  .legal {
    box-shadow: none !important;
  }
}