/*
 * KubeManta docs — "abyssal telemetry" brand theme.
 * Single source of truth for these tokens: /home/ubuntu/website/app/lib/theme.ts
 * ABYSS #0a1420 · TRENCH #0f1f30 · CYAN #00f0ff · BIO #7df9ff
 * CORAL #ff8a5b · FOAM #e8f1f5 · SLATE #7a8a9a · HAIR rgba(125,249,255,0.14)
 *
 * Light scheme ("default") derivatives — NOT inversions, re-picked for WCAG AA on light:
 * SURF #f6fafc (bg) · SHALLOWS #eaf2f6 (panels) · INK #13232f (body, 15.3:1)
 * DEEP-CYAN #007487 (links, 5.2:1) · DIVE #005968 (hover, 7.6:1)
 * SLATE-INK #51626f (secondary, 6.0:1) · HAIR-LIGHT rgba(19,35,47,0.12)
 */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

[data-md-color-scheme="slate"] {
  --md-hue: 204;

  /* Base surfaces */
  --md-default-bg-color: #0a1420;
  --md-default-bg-color--light: #0f1f30;
  --md-default-bg-color--lighter: rgba(125, 249, 255, 0.07);
  --md-default-bg-color--lightest: rgba(125, 249, 255, 0.03);

  /* Body text */
  --md-default-fg-color: #e8f1f5;
  --md-default-fg-color--light: #7a8a9a;
  --md-default-fg-color--lighter: rgba(125, 249, 255, 0.14);
  --md-default-fg-color--lightest: rgba(125, 249, 255, 0.07);

  /* Header / tabs bar — dark, not a bright cyan band */
  --md-primary-fg-color: #0f1f30;
  --md-primary-fg-color--light: #0f1f30;
  --md-primary-fg-color--dark: #0a1420;
  --md-primary-bg-color: #e8f1f5;
  --md-primary-bg-color--light: rgba(232, 241, 245, 0.7);

  /* Accent — cyan links, bio hover */
  --md-accent-fg-color: #7df9ff;
  --md-accent-fg-color--transparent: rgba(125, 249, 255, 0.1);
  --md-accent-bg-color: #0a1420;
  --md-accent-bg-color--light: #0a1420;

  /* Typeset */
  --md-typeset-color: #e8f1f5;
  --md-typeset-a-color: #00f0ff;
  --md-typeset-mark-color: rgba(0, 240, 255, 0.25);
  --md-typeset-table-color: rgba(125, 249, 255, 0.14);
  --md-typeset-table-color--light: rgba(125, 249, 255, 0.05);
  --md-typeset-kbd-color: #14283a;
  --md-typeset-kbd-accent-color: #182e42;
  --md-typeset-kbd-border-color: #0a1420;

  /* Code */
  --md-code-fg-color: #e8f1f5;
  --md-code-bg-color: #0f1f30;
  --md-code-bg-color--light: rgba(15, 31, 48, 0.9);
  --md-code-bg-color--lighter: rgba(15, 31, 48, 0.54);

  /* Admonitions / panels */
  --md-admonition-fg-color: #e8f1f5;
  --md-admonition-bg-color: #0f1f30;

  /* Footer */
  --md-footer-bg-color: rgba(10, 20, 32, 0.95);
  --md-footer-bg-color--dark: #060d16;
  --md-footer-fg-color: #e8f1f5;
  --md-footer-fg-color--light: #7a8a9a;

  color-scheme: dark;
}

/* Content area, nav rail and TOC read as raised "panels" over the abyss bg */
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  background-color: rgba(15, 31, 48, 0.35);
  border-right: 1px solid rgba(125, 249, 255, 0.14);
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-sidebar__scrollwrap {
  border-right: none;
  border-left: 1px solid rgba(125, 249, 255, 0.14);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: #0f1f30;
}

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border: 1px solid rgba(125, 249, 255, 0.14);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.5), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(125, 249, 255, 0.14);
}

[data-md-color-scheme="slate"] .md-tabs {
  border-bottom: 1px solid rgba(125, 249, 255, 0.14);
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: rgba(232, 241, 245, 0.08);
}

[data-md-color-scheme="slate"] .md-search__form:hover {
  background-color: rgba(232, 241, 245, 0.14);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #00f0ff;
}

[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: #00f0ff;
}

/* Selection + focus accents */
[data-md-color-scheme="slate"] ::selection {
  background-color: rgba(0, 240, 255, 0.25);
  color: #e8f1f5;
}

/* ---------------------------------------------------------------------------
 * Light scheme ("default") — same brand family, re-picked for light surfaces.
 * ------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-hue: 204;

  /* Base surfaces */
  --md-default-bg-color: #f6fafc;
  --md-default-bg-color--light: #eaf2f6;
  --md-default-bg-color--lighter: rgba(19, 35, 47, 0.07);
  --md-default-bg-color--lightest: rgba(19, 35, 47, 0.03);

  /* Body text */
  --md-default-fg-color: #13232f;
  --md-default-fg-color--light: #51626f;
  --md-default-fg-color--lighter: rgba(19, 35, 47, 0.24);
  --md-default-fg-color--lightest: rgba(19, 35, 47, 0.08);

  /* Header / tabs bar — light panel, dark ink, hairline (mirrors the dark chrome) */
  --md-primary-fg-color: #eaf2f6;
  --md-primary-fg-color--light: #eaf2f6;
  --md-primary-fg-color--dark: #dce9f0;
  --md-primary-bg-color: #13232f;
  --md-primary-bg-color--light: rgba(19, 35, 47, 0.7);

  /* Accent — deep cyan for interactive states (raw CYAN fails contrast on light) */
  --md-accent-fg-color: #005968;
  --md-accent-fg-color--transparent: rgba(0, 116, 135, 0.1);
  --md-accent-bg-color: #f6fafc;
  --md-accent-bg-color--light: #f6fafc;

  /* Typeset */
  --md-typeset-color: #13232f;
  --md-typeset-a-color: #007487;
  --md-typeset-mark-color: rgba(0, 240, 255, 0.35);
  --md-typeset-table-color: rgba(19, 35, 47, 0.12);
  --md-typeset-table-color--light: rgba(19, 35, 47, 0.05);
  --md-typeset-kbd-color: #e3edf3;
  --md-typeset-kbd-accent-color: #f6fafc;
  --md-typeset-kbd-border-color: #b8ccd8;

  /* Code */
  --md-code-fg-color: #13232f;
  --md-code-bg-color: #e9f1f6;
  --md-code-bg-color--light: rgba(233, 241, 246, 0.9);
  --md-code-bg-color--lighter: rgba(233, 241, 246, 0.54);

  /* Admonitions / panels */
  --md-admonition-fg-color: #13232f;
  --md-admonition-bg-color: #ffffff;

  /* Footer */
  --md-footer-bg-color: #eaf2f6;
  --md-footer-bg-color--dark: #dce9f0;
  --md-footer-fg-color: #13232f;
  --md-footer-fg-color--light: #51626f;

  color-scheme: light;
}

[data-md-color-scheme="default"] .md-sidebar__scrollwrap {
  background-color: rgba(234, 242, 246, 0.5);
  border-right: 1px solid rgba(19, 35, 47, 0.12);
}

[data-md-color-scheme="default"] .md-sidebar--secondary .md-sidebar__scrollwrap {
  border-right: none;
  border-left: 1px solid rgba(19, 35, 47, 0.12);
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) {
  background-color: #ffffff;
}

[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details {
  border: 1px solid rgba(19, 35, 47, 0.12);
  box-shadow: none;
}

[data-md-color-scheme="default"] .md-header {
  box-shadow: 0 0 0.2rem rgba(19, 35, 47, 0.08), 0 0.2rem 0.4rem rgba(19, 35, 47, 0.06);
  border-bottom: 1px solid rgba(19, 35, 47, 0.12);
}

[data-md-color-scheme="default"] .md-tabs {
  border-bottom: 1px solid rgba(19, 35, 47, 0.12);
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: rgba(19, 35, 47, 0.06);
}

[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: rgba(19, 35, 47, 0.11);
}

[data-md-color-scheme="default"] .md-search__input {
  color: #13232f;
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: #51626f;
}

[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__link:focus,
[data-md-color-scheme="default"] .md-nav__link:hover {
  color: #007487;
}

[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link {
  color: #007487;
}

[data-md-color-scheme="default"] ::selection {
  background-color: rgba(0, 240, 255, 0.35);
  color: #13232f;
}

/* Scheme-aware logo: navy-on-light variant when the light palette is active */
[data-md-color-scheme="default"] .md-header__button.md-logo img {
  content: url("../assets/manta-light.svg");
}

/* Typography — Bricolage Grotesque for headings/title, Inter for body/nav, JetBrains Mono for code */
.md-header__title,
.md-nav__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Bricolage Grotesque", var(--md-text-font-family, Inter), sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body,
.md-typeset,
.md-nav__link,
.md-tabs__link,
.md-search__input {
  font-family: "Inter", var(--md-text-font-family, sans-serif);
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd,
.md-typeset .highlight {
  font-family: "JetBrains Mono", var(--md-code-font-family, monospace);
}

/* Wordmark: logo already carries the cyan manta mark, keep the title crisp FOAM */
.md-header__title {
  color: var(--md-primary-bg-color);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: 1.4rem;
}