/* Agent Esquire AI — bespoke styles layered on top of Tailwind.
   The deep-purple/neon palette lives in tailwind.config.js. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --ink-950: #0a0517;
  --ink-900: #120826;
  --ink-800: #1a0b2e;
  --esq-600: #6b21d4;
  --esq-500: #8b3df0;
  --esq-400: #a86bff;
  --magenta: #f72585;
  --cyan: #00f5ff;
}

html { background: var(--ink-950); color-scheme: dark; }
body { font-family: 'Geist', 'Inter', system-ui, sans-serif; }

.container-tight { max-width: 64rem; margin-inline: auto; padding-inline: 1.25rem; }
.container-wide  { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }

/* ----- Buttons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
       padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 0.75rem;
       transition: transform 120ms ease, box-shadow 200ms ease, background 200ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--esq-600) 0%, var(--magenta) 100%);
  color: white;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 12px 30px -10px rgba(247,37,133,0.5);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 16px 40px -8px rgba(247,37,133,0.7), 0 0 30px rgba(139,61,240,0.4); }
.btn-ghost { background: rgba(255,255,255,0.04); color: #e9e3f5; border: 1px solid rgba(168,107,255,0.25); }
.btn-ghost:hover { background: rgba(168,107,255,0.10); border-color: rgba(168,107,255,0.55); }
.btn-cyan {
  background: transparent; color: var(--cyan); border: 1px solid rgba(0,245,255,0.45);
}
.btn-cyan:hover { background: rgba(0,245,255,0.08); box-shadow: 0 0 18px rgba(0,245,255,0.35); }

/* ----- Form inputs ----- */
.input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(168,107,255,0.18);
  border-radius: 0.65rem;
  color: #e9e3f5;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.input::placeholder { color: rgba(233,227,245,0.45); }
.input:focus { outline: none; border-color: var(--esq-400);
               background: rgba(168,107,255,0.06);
               box-shadow: 0 0 0 3px rgba(139,61,240,0.18); }

/* ----- Cards ----- */
.card {
  background: linear-gradient(180deg, rgba(36,17,57,0.6) 0%, rgba(18,8,38,0.6) 100%);
  border: 1px solid rgba(168,107,255,0.15);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 200ms ease, transform 200ms ease;
}
.card:hover { border-color: rgba(168,107,255,0.45); transform: translateY(-2px); }

/* ----- Misc ----- */
.text-gradient {
  background: linear-gradient(135deg, #c79bff 0%, #ff4fa1 60%, #00f5ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glow-violet { box-shadow: 0 0 30px rgba(139,61,240,0.4), 0 0 80px rgba(139,61,240,0.15); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(168,107,255,0.4), transparent); }

.msg { padding: 0.9rem 1rem; border-radius: 0.65rem; margin-bottom: 1rem; border: 1px solid; }
.msg-success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.35); color: #6ee7b7; }
.msg-error   { background: rgba(247,37,133,0.10); border-color: rgba(247,37,133,0.45); color: #ffb4d1; }
.msg-info    { background: rgba(0,245,255,0.06);  border-color: rgba(0,245,255,0.30); color: #c2faff; }

/* ----- Prose (newsletter / about) ----- */
.prose-esq h1, .prose-esq h2, .prose-esq h3 { color: #f1e2ff; font-weight: 700; line-height: 1.2; }
.prose-esq h1 { font-size: 2.25rem; margin-top: 1.5rem; margin-bottom: 1rem; }
.prose-esq h2 { font-size: 1.6rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-esq h3 { font-size: 1.25rem; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #c79bff; }
.prose-esq p  { color: #e9e3f5; line-height: 1.7; margin-bottom: 1rem; }
.prose-esq a  { color: #00f5ff; text-decoration: underline; text-underline-offset: 3px; }
.prose-esq strong { color: #fff; }
.prose-esq ul, .prose-esq ol { margin-left: 1.5rem; margin-bottom: 1rem; color: #e9e3f5; }
.prose-esq li { margin-bottom: 0.35rem; }
.prose-esq code { background: rgba(168,107,255,0.12); padding: 0.1rem 0.4rem; border-radius: 0.35rem; font-family: 'Geist Mono', monospace; font-size: 0.9em; color: #e0c5ff; }