/* ============================================================
   PyGX docs — MkDocs Material brand overrides
   Aligns the docs with the PyGX website: rose #BE0E48,
   Space Grotesk headings, Inter body, JetBrains Mono code.
   Replaces the legacy Sphinx-era style.css entirely.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---- brand palette ---- */
:root {
  --pygx-rose: #BE0E48;
  --pygx-rose-bright: #CE2854;
  --pygx-rose-dim: #AA0039;
  --md-primary-fg-color: var(--pygx-rose);
  --md-primary-fg-color--light: var(--pygx-rose-bright);
  --md-primary-fg-color--dark: var(--pygx-rose-dim);
  --md-accent-fg-color: var(--pygx-rose-bright);
}

/* ---- light scheme ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fbfbfd;
  --md-typeset-a-color: var(--pygx-rose);
  --md-code-bg-color: #f3f3f8;
  --md-code-hl-color: rgba(190, 14, 72, 0.12);
  --md-footer-bg-color: #221f33;
  --md-footer-bg-color--dark: #1a1828;
}

/* ---- dark scheme (matches the site's rose-gray dark) ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 350;
  --md-default-bg-color: #1c1c24;
  --md-default-fg-color: rgba(236, 236, 243, 0.92);
  --md-typeset-a-color: #e65d76;
  --md-accent-fg-color: #ef7688;
  --md-code-bg-color: #16161d;
  --md-code-hl-color: rgba(206, 40, 84, 0.16);
  --md-footer-bg-color: #16161d;
}

/* ---- typography ---- */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.md-typeset h1 { color: var(--md-default-fg-color); font-weight: 700; }
.md-header__topic, .md-header__title { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }

/* ---- header / tabs ---- */
.md-header, .md-tabs { background-color: var(--pygx-rose); }
/* Deep rose in dark mode: the same L/C recipe the violet original used
   (oklch L .256 C .078), hue-shifted to the brand's 12. A full-strength
   --pygx-rose bar reads too heavy against the dark page. */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs { background-color: #410E19; }

/* ---- rounded, card-like surfaces ---- */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .admonition, .md-typeset details { border-radius: 10px; border-width: 1px; }
.md-search__form { border-radius: 8px; }

/* ---- code ---- */
.md-typeset code { border-radius: 6px; }

/* ---- tables: normal wrapping (kept from previous stylesheet) ---- */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { white-space: normal; }

/* ---- nav active item in brand color ---- */
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--md-typeset-a-color); font-weight: 600; }

/* ---- buttons ---- */
.md-typeset .md-button--primary { background-color: var(--pygx-rose); border-color: var(--pygx-rose); border-radius: 10px; }
.md-typeset .md-button { border-radius: 10px; }