/* Clix Docs theme — matches goclix.ai (tokens sampled from its stylesheet 2026-09-27).
   Marketing tokens: ink oklch(22% .02 200) / #122534 in the logo, fg oklch(20% .02 200),
   mint-bright oklch(48% .16 158) (buttons, links), mint oklch(70% .16 158), lime oklch(78% .18 125),
   green #04EC79 (logo accent), bg oklch(98.5% .006 160), muted oklch(95% .01 190),
   muted-fg oklch(48% .02 200), border oklch(20% .02 200 / .12). Fonts: Manrope, Sora (display). */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap");

:root {
  --clix-ink: #122534;
  --clix-fg: oklch(20% 0.02 200);
  --clix-muted-fg: oklch(48% 0.02 200);
  --clix-muted: oklch(95% 0.01 190);
  --clix-border: oklch(20% 0.02 200 / 0.12);
  --clix-bg: oklch(98.5% 0.006 160);
  --clix-card: #ffffff;
  --clix-mint-bright: oklch(48% 0.16 158);
  --clix-mint: oklch(70% 0.16 158);
  --clix-lime: oklch(78% 0.18 125);
  --clix-green: #04ec79;
  --clix-code-bg: #020930;
  --clix-code-fg: #e6edf3;
}

/* Light scheme: white header like the marketing nav, dark-green accent. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: var(--clix-muted);
  --md-primary-bg-color: var(--clix-ink);
  --md-primary-bg-color--light: var(--clix-muted-fg);
  --md-accent-fg-color: var(--clix-mint-bright);
  --md-accent-fg-color--transparent: oklch(48% 0.16 158 / 0.1);
  --md-default-bg-color: var(--clix-bg);
  --md-default-fg-color: var(--clix-fg);
  --md-default-fg-color--light: var(--clix-muted-fg);
  --md-default-fg-color--lighter: var(--clix-border);
  --md-default-fg-color--lightest: oklch(20% 0.02 200 / 0.06);
  --md-typeset-a-color: var(--clix-mint-bright);
  --md-code-bg-color: var(--clix-muted);
  --md-footer-bg-color: var(--clix-ink);
  --md-footer-bg-color--dark: #0c1a26;
}

/* Dark scheme: ink header and surfaces, mint links, monochrome wordmark. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--clix-ink);
  --md-primary-fg-color--light: #1a3245;
  --md-primary-fg-color--dark: #0c1a26;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--clix-mint);
  --md-accent-fg-color--transparent: oklch(70% 0.16 158 / 0.12);
  --md-default-bg-color: #0f1c26;
  --md-typeset-a-color: var(--clix-mint);
  --md-code-bg-color: var(--clix-code-bg);
  --md-code-fg-color: var(--clix-code-fg);
  --md-footer-bg-color: #0c1a26;
}
[data-md-color-scheme="slate"] .md-header__button.md-logo img { filter: brightness(0) invert(1); }

/* Header: thin border under the white bar, wordmark height, tab underline in green. */
.md-header { box-shadow: none; border-bottom: 1px solid var(--clix-border); }
.md-header__button.md-logo img { height: 1.6rem; width: auto; }
.md-header__topic .md-ellipsis { font-family: Sora, Manrope, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.md-tabs { border-bottom: 1px solid var(--clix-border); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--clix-mint-bright); }
[data-md-color-scheme="slate"] .md-tabs__link--active { color: var(--clix-mint); }
.md-search__form { background-color: var(--clix-muted); }
.md-search__input::placeholder, .md-search__icon { color: var(--clix-muted-fg); }
[data-md-color-scheme="slate"] .md-search__form { background-color: #1a3245; }
[data-md-color-scheme="slate"] .md-search__input { color: #fff; }
[data-md-color-scheme="slate"] .md-search__input::placeholder, [data-md-color-scheme="slate"] .md-search__icon { color: rgba(255,255,255,.6); }

/* Headings in Sora, tight like the marketing hero. */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: Sora, Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.02em; color: var(--clix-ink);
}
[data-md-color-scheme="slate"] .md-typeset h1, [data-md-color-scheme="slate"] .md-typeset h2, [data-md-color-scheme="slate"] .md-typeset h3 { color: #ffffff; }
.md-typeset h1 { font-weight: 800; }

/* Buttons and pills: dark green like "Start free". */
.md-typeset .md-button--primary { background-color: var(--clix-mint-bright); border-color: var(--clix-mint-bright); color: #fff; border-radius: 999px; }
.md-typeset .md-button { border-radius: 999px; }

/* Admonition accents on the brand greens; keep warning and danger semantic. */
.md-typeset .admonition.note, .md-typeset details.note { border-color: var(--clix-mint-bright); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary { background-color: oklch(48% 0.16 158 / 0.1); }
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before { background-color: var(--clix-mint-bright); }
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: var(--clix-mint); }
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { background-color: oklch(70% 0.16 158 / 0.12); }
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--clix-mint); }
.md-typeset .admonition.info, .md-typeset details.info { border-color: var(--clix-lime); }
.md-typeset .info > .admonition-title, .md-typeset .info > summary { background-color: oklch(78% 0.18 125 / 0.14); }
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before { background-color: var(--clix-lime); }

/* Tables and cards on a white card over the tinted page background. */
.md-typeset table:not([class]) { font-size: .8rem; background: var(--clix-card); border: 1px solid var(--clix-border); border-radius: .5rem; overflow: hidden; }
.md-typeset table:not([class]) th { background: var(--clix-muted); color: var(--clix-ink); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) { background: #14232f; border-color: rgba(255,255,255,.1); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: #1a3245; color: #fff; }

/* Screenshots framed like the product shots on the marketing page. */
.md-typeset img[src*="/screenshots/"] { border: 1px solid var(--clix-border); border-radius: .75rem; box-shadow: 0 8px 24px oklch(20% 0.02 200 / 0.08); }

/* Footer in ink, links in green. */
.md-footer-meta, .md-footer__inner { color: #fff; }
.md-footer__link:hover .md-footer__title { color: var(--clix-green); }