/* ── Gridone brand colors ──
   Matches the app's warm amber / deep navy palette defined in
   apps/ui/src/index.css.  MkDocs Material surfaces these via
   --md-primary-* / --md-accent-* custom properties.

   The header uses the app's dark sidebar color (#161a22) with
   amber accent text — mirroring the sidebar vs primary contrast.
*/

/* ---------- Light mode ---------- */
[data-md-color-scheme="default"] {
  /* Dark header (sidebar color) with amber accent */
  --md-primary-fg-color: #161a22;
  --md-primary-fg-color--light: #1e2330;
  --md-primary-fg-color--dark: #0e1118;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* Amber accent */
  --md-accent-fg-color: #b8860b;
  --md-accent-fg-color--transparent: rgba(184, 134, 11, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-typeset-a-color: #b8860b;
}

/* Header text & icons: amber on dark background */
[data-md-color-scheme="default"] .md-header {
  --md-primary-bg-color: #d4a034;
  --md-primary-bg-color--light: rgba(212, 160, 52, 0.7);
  color: #d4a034;
}

/* ---------- Dark mode ---------- */
[data-md-color-scheme="slate"] {
  --md-default-fg-color: rgba(208, 213, 225, 1);
  --md-default-fg-color--light: rgba(208, 213, 225, 0.7);
  --md-default-fg-color--lighter: rgba(208, 213, 225, 0.32);
  --md-default-fg-color--lightest: rgba(208, 213, 225, 0.12);

  /* Content background */
  --md-default-bg-color: #1e2134;
  --md-default-bg-color--light: #252840;
  --md-default-bg-color--lighter: #2d304c;
  --md-default-bg-color--lightest: #383c58;

  /* Header — same family, just a shade darker for subtle separation */
  --md-primary-fg-color: #171a2c;
  --md-primary-fg-color--light: #1c1f32;
  --md-primary-fg-color--dark: #121524;
  --md-primary-bg-color: #d4a034;
  --md-primary-bg-color--light: rgba(212, 160, 52, 0.7);

  /* Amber accent */
  --md-accent-fg-color: #d4a034;
  --md-accent-fg-color--transparent: rgba(212, 160, 52, 0.1);
  --md-accent-bg-color: #171a2c;
  --md-accent-bg-color--light: rgba(23, 26, 44, 0.7);

  --md-typeset-a-color: #d4a034;

  --md-code-bg-color: #161929;
  --md-code-fg-color: #d0d5e1;
}

/* Prevent layout shift from scrollbar appearing/disappearing between pages */
html {
  overflow-y: scroll;
}

/* Header & tabs: amber title/logo, white nav links */
[data-md-color-scheme="slate"] .md-header__topic:first-child {
  color: #d4a034 !important;
}

[data-md-color-scheme="slate"] .md-header__topic:last-child,
[data-md-color-scheme="slate"] .md-header__button,
[data-md-color-scheme="slate"] .md-header .md-icon {
  color: rgba(255, 255, 255, 0.65) !important;
}

[data-md-color-scheme="slate"] .md-header__button:hover,
[data-md-color-scheme="slate"] .md-header .md-icon:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Light mode: header text */
[data-md-color-scheme="default"] .md-header {
  --md-primary-bg-color: rgba(255, 255, 255, 0.85);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.55);
}

[data-md-color-scheme="default"] .md-tabs {
  --md-primary-bg-color: rgba(255, 255, 255, 0.85);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.55);
}