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

:root {
  /* StudioM tokens from studio.makoa.us */
  --studiom-primary: hsl(245 45% 45%);
  --studiom-primary-strong: hsl(245 45% 42%);
  --studiom-accent: hsl(260 50% 52%);
  --studiom-bg: hsl(0 0% 100%);
  --studiom-card: hsl(245 15% 99%);
  --studiom-border: hsl(245 12% 90%);
  --studiom-text: hsl(245 25% 12%);
  --studiom-muted: hsl(245 15% 42%);

  /* MkDocs Material variable overrides */
  --md-primary-fg-color: var(--studiom-primary);
  --md-primary-fg-color--light: hsl(245 45% 52%);
  --md-primary-fg-color--dark: var(--studiom-primary-strong);
  --md-accent-fg-color: var(--studiom-accent);
  --md-accent-fg-color--transparent: hsl(260 50% 52% / 0.12);
  --md-default-bg-color: var(--studiom-bg);
  --md-default-fg-color: var(--studiom-text);
  --md-default-fg-color--light: var(--studiom-muted);
  --md-typeset-a-color: var(--studiom-primary);

  --studiom-gradient-primary: linear-gradient(135deg, hsl(245 45% 45%), hsl(260 50% 52%));
  --studiom-gradient-soft: linear-gradient(160deg, hsl(245 30% 97%), hsl(245 20% 99%) 50%, hsl(260 25% 96%));
}

/* Typography */
body,
.md-typeset,
.md-nav,
.md-search,
.md-ellipsis {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
}

/* Header and tabs */
.md-header {
  background: var(--studiom-bg);
  color: var(--studiom-text);
  border-bottom: 1px solid var(--studiom-border);
  box-shadow: 0 2px 10px hsl(245 35% 10% / 0.08);
}

.md-tabs {
  background: hsl(245 30% 97%);
  border-bottom: 1px solid var(--studiom-border);
}

.md-header__topic,
.md-header__title,
.md-header__button,
.md-tabs__link {
  color: var(--studiom-text);
}

.md-tabs__link--active,
.md-tabs__link:hover,
.md-header__button:hover {
  color: var(--studiom-primary);
}

/* Brand logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Main content and cards */
.md-main,
.md-content {
  background: var(--studiom-gradient-soft);
}

.md-typeset {
  color: var(--studiom-text);
}

.md-sidebar__scrollwrap,
.md-typeset table:not([class]) {
  border-color: var(--studiom-border);
}

.md-typeset table:not([class]) {
  background: var(--studiom-card);
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Links and buttons */
.md-typeset a:hover {
  color: hsl(260 50% 48%);
}

.md-typeset .md-button,
.md-typeset .md-button--primary {
  border-radius: 0.65rem;
  border-color: var(--studiom-primary);
}

.md-typeset .md-button--primary {
  background: var(--studiom-gradient-primary);
}

/* Admonitions / callouts */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.8rem;
  border: 1px solid hsl(245 30% 82%);
  box-shadow: 0 1px 8px hsl(245 35% 10% / 0.05);
  overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 700;
}

/* Search highlight and UI accents */
.md-search-result mark,
.md-typeset mark {
  background: hsl(260 50% 52% / 0.25);
}

/* Search UX: keep bar stable across hover/focus and improve readability */
.md-search__form {
  border: 1px solid hsl(245 12% 82%);
  border-radius: 0.55rem;
  background-color: hsl(245 18% 94%);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Remove ghosting/shadow effect - disable search suggest overlay that creates duplicate text */
.md-search__suggest {
  display: none !important;
}

.md-search__form,
.md-search__input,
.md-search__icon {
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.md-search__input {
  color: hsl(245 25% 18%) !important;
  -webkit-font-smoothing: antialiased;
}

.md-search__input::placeholder {
  color: hsl(245 12% 42%) !important;
  opacity: 1;
}

.md-search__icon {
  color: hsl(245 18% 36%) !important;
}

.md-search__form:hover,
.md-search__form:focus-within {
  background-color: hsl(0 0% 100%);
  border-color: hsl(245 35% 58%);
  box-shadow: none !important;
}

/* Footer */
.md-footer {
  background: hsl(245 25% 14%);
}

/* Mobile drawer header - match desktop header color scheme */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: var(--studiom-bg) !important;
  color: var(--studiom-text) !important;
  border-bottom: 1px solid var(--studiom-border);
  box-shadow: 0 2px 10px hsl(245 35% 10% / 0.08);
}

.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button.md-logo img,
.md-nav--primary .md-nav__title[for="__drawer"] .md-nav__button.md-logo svg {
  fill: unset;
}

/* Force remove ALL shadows from search bar - overrides MkDocs Material theme */
.md-search .md-search__form,
.md-search .md-search__form *,
.md-search .md-search__input,
.md-search .md-search__icon,
[data-md-component="search"] .md-search__form,
[data-md-component="search"] .md-search__form *,
[data-md-component="search"] .md-search__input,
[data-md-component="search"] .md-search__icon {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}