/* Generated from docs/theme/tokens.json by scripts/sync_tokens.py.
   Do not edit this file by hand. Regenerate with:
   python scripts/sync_tokens.py
   Brand #009999 is the wordmark, large surfaces, and dark-scheme links
   (4.61:1 on slate). It is 3.49:1 on white, so light-scheme text uses
   interactive #007A7A (5.17:1 with white). The header is the app navbar:
   Chakra bg.muted with fg text and a 1px border, not the interactive teal. */

/* Docs text is Inter (variable, roman + italic). Code is JetBrains Mono
   at weights 400 and 700, with italics. Both are OFL and live in
   ../assets/fonts/ with their license texts. theme.font is false, so
   these variables replace the Google Fonts block. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
}

:root {
  --md-text-font: "Inter Variable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono";
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #007A7A;
  --md-primary-fg-color--light: #009999;
  --md-primary-fg-color--dark: #007A7A;
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FFFFFFb3;
  --md-accent-fg-color: #007A7A;
  --md-accent-fg-color--transparent: #007A7A1a;
  --md-accent-bg-color: #FFFFFF;
  --md-accent-bg-color--light: #FFFFFFb3;
  --md-typeset-a-color: #007A7A;
  --md-footer-bg-color: #007A7A;
  --md-footer-bg-color--dark: #007A7A;
  --md-footer-fg-color: #FFFFFF;
  --md-footer-fg-color--light: #FFFFFFb3;
  --md-footer-fg-color--lighter: #FFFFFF73;
  --gt-header-bg: #f4f4f5;
  --gt-header-fg: #09090B;
  --gt-header-border: #e4e4e7;
  --gt-header-muted: #52525b;
}

[data-md-color-scheme="default"] .md-typeset .admonition.note,
[data-md-color-scheme="default"] .md-typeset details.note,
[data-md-color-scheme="default"] .md-typeset .admonition.info,
[data-md-color-scheme="default"] .md-typeset details.info {
  border-color: #007A7A;
}

[data-md-color-scheme="default"] .md-typeset .admonition.note:focus-within,
[data-md-color-scheme="default"] .md-typeset details.note:focus-within,
[data-md-color-scheme="default"] .md-typeset .admonition.info:focus-within,
[data-md-color-scheme="default"] .md-typeset details.info:focus-within {
  box-shadow: 0 0 0 0.2rem #007A7A1a;
}

[data-md-color-scheme="default"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .note > summary,
[data-md-color-scheme="default"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .info > summary {
  background-color: #007A7A1a;
}

[data-md-color-scheme="default"] .md-typeset .note > .admonition-title::before,
[data-md-color-scheme="default"] .md-typeset .note > summary::before,
[data-md-color-scheme="default"] .md-typeset .info > .admonition-title::before,
[data-md-color-scheme="default"] .md-typeset .info > summary::before {
  background-color: #007A7A;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  color: #007A7A;
  border-bottom-color: #007A7A;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #007A7A;
  --md-primary-fg-color--light: #009999;
  --md-primary-fg-color--dark: #007A7A;
  --md-primary-bg-color: #FFFFFF;
  --md-primary-bg-color--light: #FFFFFFb3;
  --md-accent-fg-color: #009999;
  --md-accent-fg-color--transparent: #0099991a;
  --md-accent-bg-color: #FFFFFF;
  --md-accent-bg-color--light: #FFFFFFb3;
  --md-typeset-a-color: #009999;
  --md-footer-bg-color: #007A7A;
  --md-footer-bg-color--dark: #007A7A;
  --md-footer-fg-color: #FFFFFF;
  --md-footer-fg-color--light: #FFFFFFb3;
  --md-footer-fg-color--lighter: #FFFFFF73;
  --gt-header-bg: #18181b;
  --gt-header-fg: #fafafa;
  --gt-header-border: #27272a;
  --gt-header-muted: #a1a1aa;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note,
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-color: #009999;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note:focus-within,
[data-md-color-scheme="slate"] .md-typeset details.note:focus-within,
[data-md-color-scheme="slate"] .md-typeset .admonition.info:focus-within,
[data-md-color-scheme="slate"] .md-typeset details.info:focus-within {
  box-shadow: 0 0 0 0.2rem #0099991a;
}

[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .note > summary,
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary {
  background-color: #0099991a;
}

[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .note > summary::before,
[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .info > summary::before {
  background-color: #009999;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  color: #009999;
  border-bottom-color: #009999;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: #009999;
  border-color: #009999;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: #007A7A;
  border-color: #007A7A;
  color: #FFFFFF;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:focus,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: #007A7A;
  border-color: #007A7A;
  color: #FFFFFF;
}

/* Header row matches the app navbar: 81px tall including the 1px
   border, mark 72px. Flex centering leaves the app's 4px inset.
   The logo file is unchanged. */
.md-header,
.md-tabs {
  background-color: var(--gt-header-bg);
  color: var(--gt-header-fg);
  box-shadow: none;
}

.md-header--shadow {
  box-shadow: none;
}

.md-header {
  height: 81px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--gt-header-border);
}

.md-tabs {
  border-bottom: 1px solid var(--gt-header-border);
}

/* One border, under the tab row when tabs are on screen. The header
   keeps a 1px edge so the logo row stays 81px. */
@media screen and (min-width: 76.25em) {
  .md-header {
    border-bottom-color: var(--gt-header-bg);
  }
}

.md-header__inner {
  height: calc(81px - 1px);
  min-height: calc(81px - 1px);
}

.md-header__title {
  height: calc(81px - 1px);
  line-height: calc(81px - 1px);
}

.md-header__button.md-logo {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: inline-block;
  }
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 72px;
  width: auto;
}

/* Focus on the neutral bar uses the scheme focus color. */
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-tabs__link,
[data-md-color-scheme="default"] .md-source {
  outline-color: #007A7A;
}

[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-tabs__link,
[data-md-color-scheme="slate"] .md-source {
  outline-color: #009999;
}

/* Search sits on gray, so the field uses the navbar border and fg.
   The open overlay keeps Material's page colors. */
@media screen and (min-width: 60em) {
  .md-header .md-search__form,
  .md-header .md-search__form:hover {
    background-color: var(--gt-header-border);
    color: var(--gt-header-fg);
  }

  .md-header .md-search__input {
    color: var(--gt-header-fg);
  }

  .md-header .md-search__input::placeholder,
  .md-header .md-search__input + .md-search__icon {
    color: var(--gt-header-muted);
  }
}

.md-typeset :focus-visible {
  outline-color: var(--md-accent-fg-color);
}

/* Brand teal as a border on code, not as text. */
.md-typeset pre > code {
  border-left: 3px solid #009999;
}

.md-clipboard {
  color: var(--md-typeset-a-color);
}

/* Permalinks: a small link icon in the link color, hidden until the
   heading is hovered or the link has keyboard focus. The pilcrow stays in
   the HTML as the link text (anchors and markup are unchanged); it is
   moved out of the box and the icon is drawn over it. Screen only, so
   Material's print rule still drops permalinks. */
@media screen {
  .md-typeset .headerlink {
    --gt-permalink-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTMuOSAxMmMwLTEuNzEgMS4zOS0zLjEgMy4xLTMuMWg0VjdIN2E1IDUgMCAwIDAtNSA1IDUgNSAwIDAgMCA1IDVoNHYtMS45SDdjLTEuNzEgMC0zLjEtMS4zOS0zLjEtMy4xTTggMTNoOHYtMkg4em05LTZoLTR2MS45aDRjMS43MSAwIDMuMSAxLjM5IDMuMSAzLjFzLTEuMzkgMy4xLTMuMSAzLjFoLTRWMTdoNGE1IDUgMCAwIDAgNS01IDUgNSAwIDAgMC01LTUiLz48L3N2Zz4=");
    position: relative;
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.35em;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    vertical-align: -0.05em;
    color: var(--md-typeset-a-color);
    opacity: 0;
  }

  .md-typeset .headerlink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--gt-permalink-icon) center / contain no-repeat;
    mask: var(--gt-permalink-icon) center / contain no-repeat;
  }

  .md-typeset :hover > .headerlink,
  .md-typeset :focus-within > .headerlink,
  .md-typeset .headerlink:focus-visible {
    opacity: 1;
  }

  .md-typeset .headerlink:hover,
  .md-typeset .headerlink:focus-visible {
    color: var(--md-typeset-a-color);
  }
}

/* Light-scheme primary buttons stay white on the interactive teal.
   A slight mix with black shows hover without a second brand color. */
[data-md-color-scheme="default"] .md-typeset .md-button--primary:focus,
[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 85%, #000);
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 85%, #000);
  color: #FFFFFF;
}

.md-typeset .gt-hero {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
  margin: 0.25rem auto 1.25rem;
}

:root {
  --gt-radius-none: 0;
  --gt-radius-2xs: 1px;
  --gt-radius-xs: 2px;
  --gt-radius-sm: 4px;
  --gt-radius-md: 6px;
  --gt-radius-lg: 8px;
  --gt-radius-xl: 12px;
  --gt-radius-2xl: 16px;
  --gt-radius-3xl: 24px;
  --gt-radius-4xl: 32px;
  --gt-radius-full: 9999px;
  --gt-radius-l1: 2px;
  --gt-radius-l2: 4px;
  --gt-radius-l3: 6px;
}

.md-typeset .md-button,
.md-search__form,
.md-search__input {
  border-radius: 4px;
}

.md-typeset pre,
.md-typeset pre > code,
.md-typeset .admonition,
.md-typeset details {
  border-radius: 6px;
}

:root {
  --gt-space-0-5: 2px;
  --gt-space-1: 4px;
  --gt-space-1-5: 6px;
  --gt-space-2: 8px;
  --gt-space-2-5: 10px;
  --gt-space-3: 12px;
  --gt-space-3-5: 14px;
  --gt-space-4: 16px;
  --gt-space-4-5: 18px;
  --gt-space-5: 20px;
  --gt-space-6: 24px;
  --gt-space-7: 28px;
  --gt-space-8: 32px;
  --gt-space-9: 36px;
  --gt-space-10: 40px;
  --gt-space-11: 44px;
  --gt-space-12: 48px;
  --gt-space-14: 56px;
  --gt-space-16: 64px;
  --gt-space-20: 80px;
  --gt-space-24: 96px;
  --gt-space-28: 112px;
  --gt-space-32: 128px;
  --gt-space-36: 144px;
  --gt-space-40: 160px;
  --gt-space-44: 176px;
  --gt-space-48: 192px;
  --gt-space-52: 208px;
  --gt-space-56: 224px;
  --gt-space-60: 240px;
  --gt-space-64: 256px;
  --gt-space-72: 288px;
  --gt-space-80: 320px;
  --gt-space-96: 384px;
}

[data-md-color-scheme="default"] {
  --gt-shadow-xs: 0px 1px 2px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 20%, transparent);
  --gt-shadow-sm: 0px 2px 4px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 30%, transparent);
  --gt-shadow-md: 0px 4px 8px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 30%, transparent);
  --gt-shadow-lg: 0px 8px 16px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 30%, transparent);
  --gt-shadow-xl: 0px 16px 24px color-mix(in srgb, #18181b 10%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 30%, transparent);
  --gt-shadow-2xl: 0px 24px 40px color-mix(in srgb, #18181b 16%, transparent), 0px 0px 1px color-mix(in srgb, #18181b 30%, transparent);
  --gt-shadow-inner: inset 0 2px 4px 0 color-mix(in srgb, black 5%, transparent);
  --gt-shadow-inset: inset 0 0 0 1px color-mix(in srgb, black 5%, transparent);
}

[data-md-color-scheme="slate"] {
  --gt-shadow-xs: 0px 1px 1px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 20%, transparent);
  --gt-shadow-sm: 0px 2px 4px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 30%, transparent);
  --gt-shadow-md: 0px 4px 8px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 30%, transparent);
  --gt-shadow-lg: 0px 8px 16px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 30%, transparent);
  --gt-shadow-xl: 0px 16px 24px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 30%, transparent);
  --gt-shadow-2xl: 0px 24px 40px color-mix(in srgb, black 64%, transparent), 0px 0px 1px inset color-mix(in srgb, #d4d4d8 30%, transparent);
  --gt-shadow-inner: inset 0 2px 4px 0 black;
  --gt-shadow-inset: inset 0 0 0 1px color-mix(in srgb, #d4d4d8 5%, transparent);
}

.md-typeset .admonition,
.md-typeset details {
  box-shadow: var(--gt-shadow-md);
}

/* App buttons: Chakra button recipe, default size. */
.md-typeset .md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
}