/* docs/css/extra.css */

/* ── Brand colour tokens ──────────────────────────────────────────────────── */
/* Light mode defaults */
:root {
  --cb-primary:   #6d28d9;
  --cb-accent:    #7c3aed;
  --cb-surface:   #f5f3ff;
  --cb-border:    #ddd6fe;
  --cb-success:   #16a34a;
  --cb-warning:   #d97706;
  --cb-danger:    #dc2626;
}

/* Dark mode — covers Zensical, Material for MkDocs, and system preference */
[data-scheme="slate"],
[data-md-color-scheme="slate"],
@media (prefers-color-scheme: dark) {
  :root {
    --cb-primary:   #7c3aed;
    --cb-accent:    #a78bfa;
    --cb-surface:   #1e1b2e;
    --cb-border:    #3730a3;
    --cb-success:   #22c55e;
    --cb-warning:   #f59e0b;
    --cb-danger:    #ef4444;
  }
}

/* ── Hero section ─────────────────────────────────────────────────────────── */
.cb-hero {
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-accent) 100%);
  border-radius: 1rem;
  margin: 2rem 0;
  color: #fff;
}

.cb-hero h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 .75rem; }
.cb-hero p  { font-size: 1.125rem; opacity: .9; max-width: 560px; margin: 0 auto 1.5rem; }

.cb-hero-buttons { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.cb-btn {
  display: inline-block;
  padding: .6rem 1.4rem;
  border-radius: .5rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.cb-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.cb-btn-primary { background: #fff; color: var(--cb-primary); }
.cb-btn-outline { border: 2px solid rgba(255,255,255,.7); color: #fff; }

/* ── Backend comparison cards ─────────────────────────────────────────────── */
.cb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.cb-card {
  border: 1px solid var(--cb-border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  background: var(--cb-surface);
  transition: border-color .2s, transform .2s;
}
.cb-card:hover { border-color: var(--cb-accent); transform: translateY(-3px); }
.cb-card h3   { margin: 0 0 .5rem; font-size: 1rem; color: var(--cb-accent); }
.cb-card p    { margin: 0; font-size: .875rem; opacity: .8; }

/* ── Custom admonitions (pymdownx-generated HTML) ─────────────────────────── */
.md-typeset .admonition.backend,
.md-typeset details.backend {
  border-color: var(--cb-accent);
}
.md-typeset .backend > .admonition-title,
.md-typeset .backend > summary {
  background-color: rgba(124, 58, 237, 0.15);
  color: var(--cb-accent);
}

.md-typeset .admonition.security { border-color: var(--cb-danger); }
.md-typeset .security > .admonition-title {
  background-color: rgba(239, 68, 68, 0.15);
}

.md-typeset .admonition.cross-platform { border-color: var(--cb-success); }
.md-typeset .cross-platform > .admonition-title {
  background-color: rgba(34, 197, 94, 0.15);
}

/* ── Terminal demo block ──────────────────────────────────────────────────── */
.cb-terminal {
  background: #0d0d0d;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .875rem;
  color: #e2e8f0;
  overflow-x: auto;
  line-height: 1.6;
  min-height: 4rem;
}
.cb-terminal .prompt  { color: var(--cb-accent); }
.cb-terminal .output  { color: #94a3b8; }
.cb-terminal .success { color: var(--cb-success); }
.cb-terminal .cursor {
  display: inline-block;
  width: .5em;
  height: 1em;
  background: var(--cb-accent);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }