/* LangStitch theme override for Material for MkDocs.
   Mirrors the langstitch.com palette: deep navy bg, violet + teal accents, Inter. */

:root {
  --ls-bg: #06080f;
  --ls-surface: #0f1420;
  --ls-surface-2: #131a2a;
  --ls-border: rgba(148, 163, 184, 0.18);
  --ls-text: #e2e8f0;
  --ls-muted: #94a3b8;
  --ls-violet: #a78bfa;
  --ls-violet-strong: #8b5cf6;
  --ls-indigo: #6366f1;
  --ls-teal: #2dd4bf;
}

/* ---- Dark scheme tuned to LangStitch ---- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--ls-bg);
  --md-default-fg-color: var(--ls-text);
  --md-default-fg-color--light: var(--ls-muted);
  --md-default-fg-color--lighter: rgba(148, 163, 184, 0.5);

  --md-primary-fg-color: var(--ls-violet-strong);
  --md-primary-fg-color--light: var(--ls-violet);
  --md-primary-fg-color--dark: #2a1d52;
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: var(--ls-teal);
  --md-typeset-a-color: var(--ls-violet);

  --md-code-bg-color: #0b1120;
  --md-code-fg-color: #e2e8f0;

  --md-footer-bg-color: #070a12;
  --md-footer-bg-color--dark: #05070d;
}

/* Header: translucent like the marketing nav */
.md-header {
  background: rgba(6, 8, 15, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ls-border);
  box-shadow: none;
}

.md-tabs {
  background: transparent;
  border-bottom: 1px solid var(--ls-border);
}

/* Sidebars / content surfaces */
.md-main {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(167, 139, 250, 0.10), transparent),
    var(--ls-bg);
}

.md-typeset h1,
.md-typeset h2 {
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.md-typeset h3 { color: #c4b5fd; }

/* Inline + block code */
.md-typeset code {
  background: rgba(99, 102, 241, 0.15);
  border-radius: 4px;
}

.md-typeset pre > code {
  background: var(--md-code-bg-color);
  border: 1px solid var(--ls-border);
  border-radius: 12px;
}

/* Buttons (.md-button) restyled as pill CTAs */
.md-typeset .md-button {
  border-radius: 999px;
  border: 1px solid var(--ls-border);
  font-weight: 600;
}

.md-typeset .md-button--primary {
  background: linear-gradient(135deg, var(--ls-indigo), var(--ls-violet-strong));
  border-color: transparent;
  color: #fff;
}

/* Grid cards on the home page */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ls-border);
  border-radius: 14px;
  background: var(--ls-surface);
  transition: border-color 120ms ease, transform 120ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-2px);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--ls-border);
  border-radius: 12px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--ls-surface-2);
  color: #f8fafc;
}

/* Admonitions: keep them on-brand */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-left-width: 3px;
}

/* Footer */
.md-footer-meta { background: var(--md-footer-bg-color--dark); }

/* Search box */
.md-search__form {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: 999px;
}
.md-search__form:hover { background: var(--ls-surface-2); }

/* Hero block (home) */
.ls-hero {
  margin: 0 0 2rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--ls-border);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 60% at 30% -10%, rgba(167, 139, 250, 0.22), transparent),
    radial-gradient(ellipse 60% 40% at 95% 0%, rgba(45, 212, 191, 0.12), transparent),
    var(--ls-surface);
}

.ls-hero .ls-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ls-teal);
}

.ls-hero h1 { margin: 0.3rem 0 0.6rem; }
.ls-hero p { color: var(--ls-muted); max-width: 46rem; }