/* Stagehand docs-site theme — re-skins mkdocs-material's default palette to
   match the console app (frontend/src/theme.css's default dark identity:
   navy background, teal accent, IBM Plex type). One fixed dark identity,
   no light/dark toggle — same as the console itself, which treats this
   palette as the default, not an opt-in mode.

   Fonts: IBM Plex Sans/Mono only (self-hosted, no CDN) — the console's own
   license-safe PUBLIC-build default (fonts.css: "the :root base above is
   the fail-closed, license-safe public-build default"). Gibson is
   internal/demo-only in the console itself and is deliberately not shipped
   to this public docs site. */

@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/ibm-plex-sans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Brand tokens lifted verbatim from frontend/src/theme.css's default :root
     (dark) block — keep these two files in sync if the console's palette
     ever changes. */
  --sh-sidebar: #00003A;
  --sh-content-bg: #0A0E2A;
  --sh-card: #131938;
  --sh-surface-2: #1B2247;
  --sh-text: #F6F9FD;
  --sh-muted: rgba(255, 255, 255, 0.72);
  --sh-border: rgba(255, 255, 255, 0.12);
  --sh-primary: #00FCCC;
  --sh-primary-hover: #CCFEF5;
  --sh-primary-fg: #00003A;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--sh-content-bg);
  --md-default-fg-color: var(--sh-text);
  --md-default-fg-color--light: var(--sh-muted);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.5);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.24);

  --md-primary-fg-color: var(--sh-sidebar);
  --md-primary-fg-color--light: var(--sh-sidebar);
  --md-primary-fg-color--dark: var(--sh-sidebar);
  --md-primary-bg-color: var(--sh-text);
  --md-primary-bg-color--light: var(--sh-muted);

  --md-accent-fg-color: var(--sh-primary);
  --md-accent-fg-color--transparent: rgba(0, 252, 204, 0.1);
  --md-accent-bg-color: var(--sh-primary-fg);

  --md-typeset-color: var(--sh-text);
  --md-typeset-a-color: var(--sh-primary);

  --md-code-bg-color: var(--sh-surface-2);
  --md-code-fg-color: var(--sh-text);

  --md-footer-bg-color: var(--sh-sidebar);
  --md-footer-bg-color--dark: var(--sh-sidebar);
  --md-footer-fg-color: var(--sh-text);
  --md-footer-fg-color--light: var(--sh-muted);
}

/* Cards/panels — console radius tokens (radius.css: 8px small / 16px
   default) instead of Material's sharper defaults. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset pre,
.md-typeset code,
.md-search__form {
  border-radius: 8px;
}
.md-typeset table:not([class]) {
  border-radius: 16px;
  overflow: hidden;
}

/* Type: IBM Plex Sans for running text/headings, IBM Plex Mono for code —
   the console's own two-face system, no third font introduced. */
body,
input {
  font-family: "IBM Plex Sans", "Aptos", "Segoe UI", system-ui, sans-serif;
}
.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Header/nav: match the console's navy sidebar exactly rather than
   Material's default color-mix shading on scroll. */
.md-header,
.md-tabs {
  background-color: var(--sh-sidebar);
}

/* Links inside body copy get the console's hover-lighten treatment instead
   of Material's default underline-on-hover-only. */
.md-typeset a:hover {
  color: var(--sh-primary-hover);
}

/* Landing page (index.md) — lede + two-card chooser. Radius/inset values
   match the console's own radius.css (16px default card radius) and
   spacing.css (24px minimum text inset) tokens verbatim. */
.md-typeset .landing-lede {
  color: var(--sh-muted);
  max-width: 44ch;
  margin: 8px 0 40px;
}
.md-typeset .landing-card__wings,
.md-typeset .landing-card__logo {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  margin: 0;
  opacity: 0.9;
  object-fit: contain;
}

.md-typeset .landing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 24px 0 40px;
}
@media (max-width: 44.9375em) {
  .md-typeset .landing-cards {
    grid-template-columns: 1fr;
  }
}

.md-typeset a.landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--sh-border);
  background: var(--sh-card);
  color: var(--sh-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.md-typeset a.landing-card:hover {
  border-color: var(--sh-primary);
  background: var(--sh-surface-2);
  color: var(--sh-text);
}
.md-typeset a.landing-card:hover .landing-card__cta {
  color: var(--sh-primary-hover);
}
.md-typeset .landing-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sh-primary);
}
.md-typeset .landing-card__title {
  font-size: 1.25rem;
  font-weight: 600;
}
.md-typeset .landing-card__body {
  color: var(--sh-muted);
  margin: 0;
  flex-grow: 1;
}
.md-typeset .landing-card__cta {
  font-weight: 600;
  color: var(--sh-primary);
}