/* === Font Loading (R2.1, R2.4) — must be first rule in file === */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&display=swap');

/* === Design Tokens (R1.1, R1.2, R1.3, R1.6) === */
:root,
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0EA5E9;
  --md-primary-fg-color--light: #38BDF8;
  --md-primary-fg-color--dark: #0284C7;
  /* Material uses --md-primary-bg-color as HEADER TEXT color (inverted from fg).
     Set to light so all header children (title, icons, search icon/placeholder) are visible. */
  --md-primary-bg-color: #E2E8F0;
  --md-primary-bg-color--light: rgba(226, 232, 240, 0.7);
  --md-accent-fg-color: #0EA5E9;
  --md-accent-fg-color--transparent: rgba(14, 165, 233, 0.1);
  --md-default-bg-color: #0F172A;
  --md-default-fg-color: #E2E8F0;
  --md-typeset-color: #E2E8F0;
  --md-typeset-a-color: #38BDF8;
  --md-code-bg-color: #1E293B;
  --md-code-fg-color: #E2E8F0;
  --md-code-hl-color: rgba(14, 165, 233, 0.15);

  /* Footer */
  --md-footer-bg-color: #0F172A;
  --md-footer-bg-color--dark: #020617;
  --md-footer-fg-color: #94A3B8;
  --md-footer-fg-color--light: #64748B;
  --md-footer-fg-color--lighter: #475569;

  /* Shadows */
  --md-shadow-z1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --md-shadow-z2: 0 4px 6px rgba(0, 0, 0, 0.4);
  --md-shadow-z3: 0 10px 15px rgba(0, 0, 0, 0.4);

  /* Search */
  --md-search-bg-color: #1E293B;
  --md-search-result-bg-color: #0F172A;

  /* Tables */
  --md-typeset-table-color: rgba(148, 163, 184, 0.12);
}

/* === Typography (R2.1, R2.3, R2.5) === */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: "Lexend", var(--md-text-font, sans-serif);
  font-feature-settings: "ss01";
  font-weight: 400;
  color: #FFFFFF;
}

.md-typeset code:not(.ksp-inline):not(.ksp-code code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* === Inline Code (R4.5) === */
.md-typeset code:not(.ksp-inline):not(.ksp-code code):not(pre code) {
  background-color: #1E293B;
  color: #E2E8F0;
  border-radius: 0.25rem;
}

/* === Header (R1.7, R6.1, R6.2, R6.3) === */
.md-header {
  background-color: #0F172A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* Explicit fallback — Material derives this from --md-primary-bg-color */
  color: #E2E8F0;
}

/* Logo SVG and hamburger icon inherit currentcolor from .md-header */
.md-header__button { color: #E2E8F0; }
.md-header__title { color: #E2E8F0; }
.md-header__topic { color: #E2E8F0; }

/* Search icon and input placeholder when search is closed */
.md-search__input + .md-search__icon { color: #E2E8F0; }
.md-search__input::placeholder { color: rgba(226, 232, 240, 0.7); }

/* Tabs strip — match header background */
.md-tabs {
  background-color: #0F172A;
  border-bottom: 1px solid #1E293B;
}
.md-tabs__link { color: #94A3B8; }
.md-tabs__list .md-tabs__link--active {
  color: #0EA5E9;
  border-bottom: 2px solid #0EA5E9;
}
.md-tabs__link:hover { color: #0EA5E9; }

/* === Sidebar Navigation (R3.3, R3.4, R3.5, R3.6) === */
.md-nav__link { color: #94A3B8; transition: color 0.15s; }
.md-nav__link:hover { color: #0EA5E9; }
.md-nav__link--active { color: #0EA5E9; border-left: 2px solid #0EA5E9; padding-left: 0.5rem; }

.md-nav__item--section > .md-nav__link,
.md-nav__item--nested > label { font-weight: 600; color: #E2E8F0; }

.md-nav--secondary .md-nav__item { border-left: 2px solid #334155; }

/* === Right-Rail TOC (R3.8) === */
.md-sidebar--secondary .md-nav__link { color: #94A3B8; }
.md-sidebar--secondary .md-nav__link--active { color: #0EA5E9; border-left: none; padding-left: 0; }
.md-sidebar--secondary .md-nav__link:hover { color: #0EA5E9; }

/* === Link Hover (R1.4) === */
.md-typeset a:hover { color: #38BDF8; }

/* === Non-KSP Code Blocks (R4.3) === */
.md-typeset .highlight pre {
  background-color: #0F172A;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* === Admonitions (R7.1-R7.5) === */

/* Generic baseline for all admonition types (R7.5) */
.md-typeset .admonition,
.md-typeset details {
  --md-admonition-bg-color: #141E2E;
  border: none;
  border-left: 4px solid #64748B;
}

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

/* Note / Info */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset details.note,
.md-typeset details.info {
  --md-admonition-bg-color: #0E253D;
  border-left: 4px solid #0EA5E9;
}
.md-typeset .admonition.note .admonition-title,
.md-typeset .admonition.info .admonition-title { color: #0EA5E9; }

/* Warning / Caution */
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning,
.md-typeset details.caution {
  --md-admonition-bg-color: #1A1A0D;
  border-left: 4px solid #F59E0B;
}
.md-typeset .admonition.warning .admonition-title,
.md-typeset .admonition.caution .admonition-title { color: #F59E0B; }

/* Danger / Error */
.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset details.danger,
.md-typeset details.error {
  --md-admonition-bg-color: #1F1220;
  border-left: 4px solid #EF4444;
}
.md-typeset .admonition.danger .admonition-title,
.md-typeset .admonition.error .admonition-title { color: #F87171; }

/* === Tables (R8.1, R8.2, R8.3) === */
.md-typeset table:not([class]) th {
  background-color: #1E293B;
  font-weight: 600;
  color: #E2E8F0;
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { border: 1px solid #334155; }
.md-typeset table:not([class]) tr:nth-child(even) td { background-color: #162032; }

/* === Focus Visibility === */
:focus-visible {
  outline: 2px solid #0EA5E9;
  outline-offset: 2px;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* === Print === */
@media print {
  .md-header, .md-sidebar, .md-tabs, .md-footer { display: none !important; }
  .md-main__inner { margin: 0; }
  .md-content { max-width: 100%; }
  pre, table { break-inside: avoid; }
  .md-typeset, .md-typeset h1, .md-typeset h2, .md-typeset h3,
  .md-typeset h4, .md-typeset h5, .md-typeset h6,
  .md-typeset a, .md-typeset p, .md-typeset li,
  .md-typeset td, .md-typeset th {
    color: #000000 !important;
    background: #FFFFFF !important;
  }
  .md-typeset a { text-decoration: underline !important; }
  .md-typeset .admonition, .md-typeset details {
    border-left: 4px solid #666666 !important;
    background: #F5F5F5 !important;
  }
}