/* ============================================
   LOOPZE Docs — github-dark palette
   Aligned with frontend/src/assets/main.css
   ============================================ */

:root {
  --lz-bg:           #0d1117;
  --lz-surface:      #161b22;
  --lz-surface-alt:  #1c2128;
  --lz-border:       #30363d;
  --lz-border-2:     #3d444d;
  --lz-text:         #e6edf3;
  --lz-text-bright:  #f0f6fc;
  --lz-text-dim:     #7d8590;
  --lz-text-faint:   #484f58;
  --lz-accent:       #58a6ff;
  --lz-accent-dim:   #388bfd;
  --lz-green:        #3fb950;
  --lz-yellow:       #d29922;
  --lz-red:          #f85149;

  --md-text-font: "Inter";
  --md-code-font: "IBM Plex Mono";
}

[data-md-color-scheme="slate"] {
  /* Surfaces */
  --md-default-bg-color:           var(--lz-bg);
  --md-default-bg-color--light:    var(--lz-surface);
  --md-default-bg-color--lighter:  var(--lz-surface-alt);
  --md-default-bg-color--lightest: var(--lz-border);

  /* Foreground */
  --md-default-fg-color:           var(--lz-text);
  --md-default-fg-color--light:    var(--lz-text-dim);
  --md-default-fg-color--lighter:  var(--lz-text-faint);
  --md-default-fg-color--lightest: rgba(125, 133, 144, 0.18);

  /* Header / sidebar primary */
  --md-primary-fg-color:        var(--lz-surface);
  --md-primary-fg-color--light: var(--lz-surface-alt);
  --md-primary-fg-color--dark:  #0a0e13;
  --md-primary-bg-color:        var(--lz-text);
  --md-primary-bg-color--light: var(--lz-text-dim);

  /* Accent — links, hovers, active */
  --md-accent-fg-color:             var(--lz-accent);
  --md-accent-fg-color--transparent: rgba(88, 166, 255, 0.13);
  --md-accent-bg-color:             var(--lz-text-bright);
  --md-accent-bg-color--light:      var(--lz-text);

  /* Code */
  --md-code-bg-color: var(--lz-surface);
  --md-code-fg-color: var(--lz-text);
  --md-code-hl-color: rgba(88, 166, 255, 0.20);
  --md-code-hl-number-color:    #79c0ff;
  --md-code-hl-special-color:   #ff7b72;
  --md-code-hl-function-color:  #d2a8ff;
  --md-code-hl-constant-color:  #79c0ff;
  --md-code-hl-keyword-color:   #ff7b72;
  --md-code-hl-string-color:    #a5d6ff;
  --md-code-hl-name-color:      var(--lz-text);
  --md-code-hl-operator-color:  var(--lz-text-dim);
  --md-code-hl-punctuation-color: var(--lz-text-dim);
  --md-code-hl-comment-color:   var(--lz-text-faint);
  --md-code-hl-generic-color:   var(--lz-text-dim);
  --md-code-hl-variable-color:  var(--lz-text);

  /* Typeset */
  --md-typeset-color:           var(--lz-text);
  --md-typeset-a-color:         var(--lz-accent);
  --md-typeset-mark-color:      rgba(210, 153, 34, 0.30);
  --md-typeset-kbd-color:       var(--lz-surface-alt);
  --md-typeset-kbd-accent-color: var(--lz-surface);
  --md-typeset-kbd-border-color: var(--lz-border);
  --md-typeset-table-color:     var(--lz-border);
  --md-typeset-table-color--light: rgba(48, 54, 61, 0.4);

  /* Admonitions */
  --md-admonition-fg-color: var(--lz-text);
  --md-admonition-bg-color: var(--lz-surface);

  /* Footer */
  --md-footer-bg-color:         var(--lz-surface);
  --md-footer-bg-color--dark:   #0a0e13;
  --md-footer-fg-color:         var(--lz-text);
  --md-footer-fg-color--light:  var(--lz-text-dim);
  --md-footer-fg-color--lighter: var(--lz-text-faint);
}

/* ── Selection / scrollbars ───────────────────────────────────────────── */

::selection {
  background: rgba(88, 166, 255, 0.33);
  color: var(--lz-text-bright);
}

* { scrollbar-width: thin; scrollbar-color: var(--lz-border) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lz-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--lz-border-2); }

/* ── Header ───────────────────────────────────────────────────────────── */

.md-header {
  background: var(--lz-surface);
  border-bottom: 1px solid var(--lz-border);
  box-shadow: none;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.md-tabs {
  background: var(--lz-bg);
  border-bottom: 1px solid var(--lz-border);
}

.md-tabs__link {
  opacity: 0.75;
  font-weight: 500;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
  color: var(--lz-accent);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.md-sidebar {
  background: var(--lz-bg);
}

.md-nav__title {
  color: var(--lz-text-dim);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-nav__link {
  font-weight: 400;
}
.md-nav__link--active,
.md-nav__link:hover {
  color: var(--lz-accent) !important;
}

/* ── Content typography ───────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.78rem;
  line-height: 1.65;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--lz-text-bright);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 { border-bottom: 1px solid var(--lz-border); padding-bottom: 0.4em; }
.md-typeset h2 { margin-top: 2em; }

/* Links: subtle underline, accent on hover */
.md-typeset a {
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.md-typeset a:hover {
  color: var(--lz-accent);
  border-bottom-color: var(--lz-accent);
}

/* ── Code ─────────────────────────────────────────────────────────────── */

.md-typeset code {
  background: var(--lz-surface);
  border: 1px solid var(--lz-border);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
}

.md-typeset pre > code {
  border: 1px solid var(--lz-border);
  border-radius: 6px;
  padding: 1em 1.1em;
}

.highlight .filename,
.md-typeset .highlighttable .filename {
  background: var(--lz-surface-alt);
  border: 1px solid var(--lz-border);
  border-bottom: none;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.md-typeset table:not([class]) {
  border: 1px solid var(--lz-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.78rem;
}
.md-typeset table:not([class]) th {
  background: var(--lz-surface-alt);
  border-bottom: 1px solid var(--lz-border);
  color: var(--lz-text-bright);
  font-weight: 600;
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--lz-surface);
}

/* ── Admonitions ──────────────────────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--lz-border);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--lz-surface);
  box-shadow: none;
}
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--lz-accent); }
.md-typeset .admonition.tip,
.md-typeset details.tip { border-left-color: var(--lz-green); }
.md-typeset .admonition.warning,
.md-typeset details.warning { border-left-color: var(--lz-yellow); }
.md-typeset .admonition.danger,
.md-typeset details.danger { border-left-color: var(--lz-red); }
.md-typeset .admonition.info,
.md-typeset details.info { border-left-color: var(--lz-accent); }

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  color: var(--lz-text-bright);
  font-weight: 600;
}

/* ── Cards (homepage grid) ────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: var(--lz-surface);
  border: 1px solid var(--lz-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--lz-accent);
  box-shadow: 0 0 0 1px var(--lz-accent),
              0 4px 16px rgba(88, 166, 255, 0.08);
}

/* ── Search ───────────────────────────────────────────────────────────── */

.md-search__form {
  background: var(--lz-surface-alt);
  border: 1px solid var(--lz-border);
  border-radius: 6px;
}
.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--lz-surface);
  border-color: var(--lz-border-2);
}
.md-search__input {
  color: var(--lz-text);
}
.md-search__input::placeholder {
  color: var(--lz-text-dim);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.md-footer-meta {
  background: #0a0e13;
  border-top: 1px solid var(--lz-border);
}

/* ── Background subtle accent glow on the body, like the website ──────── */

.md-main {
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(88, 166, 255, 0.06), transparent 60%),
    var(--lz-bg);
}

/* ── KBD ──────────────────────────────────────────────────────────────── */

.md-typeset kbd {
  background: var(--lz-surface-alt);
  border: 1px solid var(--lz-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--lz-text);
  font-family: var(--md-code-font), monospace;
  font-size: 0.75em;
  box-shadow: none;
}