/* dooer brand override for MkDocs Material — matches the live SPA design system exactly.
   Brand tokens pulled from frontend/LoginRoute.tsx COLORS:
     bg:          #0A0E17   (matches body bg in frontend/index.html)
     surface:     #0F172A   (cards, panels)
     surfaceHigh: #1E293B   (raised surfaces, search field)
     line:        #1F2937   (borders, dividers)
     ink1:        #F8FAFC   (primary text)
     ink2:        #C6C6CD   (secondary text)
     ink3:        #909097   (tertiary/muted text)
     accent:      #10B981   (emerald — primary CTA + brand check)

   Typography: Manrope (matches index.html Google Fonts import).
*/

/* Pull in Manrope to match the SPA. Inter stays as the fallback. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* Dark (Material `slate` + bare :root for first-paint before scheme attr). */
:root,
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0A0E17;
  --md-default-bg-color--light:    #0F172A;
  --md-default-bg-color--lighter:  #1E293B;
  --md-default-bg-color--lightest: #1E293B;

  --md-default-fg-color:           #F8FAFC;
  --md-default-fg-color--light:    #C6C6CD;
  --md-default-fg-color--lighter:  #909097;
  --md-default-fg-color--lightest: #1F2937;

  --md-primary-fg-color:           #0A0E17;
  --md-primary-fg-color--light:    #0F172A;
  --md-primary-fg-color--dark:     #050810;
  --md-primary-bg-color:           #F8FAFC;
  --md-primary-bg-color--light:    #C6C6CD;

  --md-accent-fg-color:                 #10B981;
  --md-accent-fg-color--transparent:    rgba(16, 185, 129, 0.12);
  --md-accent-bg-color:                 #0A0E17;
  --md-accent-bg-color--light:          #0F172A;

  --md-typeset-a-color:            #10B981;

  --md-code-bg-color:              #0F172A;
  --md-code-fg-color:              #F8FAFC;

  --md-admonition-bg-color:        #0F172A;
  --md-admonition-fg-color:        #C6C6CD;
}

/* Light (Material `default`) — mirrors SPA [data-theme="light"] palette. */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #FFFFFF;
  --md-default-bg-color--light:    #F8FAFC;
  --md-default-bg-color--lighter:  #F1F5F9;
  --md-default-bg-color--lightest: #E2E8F0;

  --md-default-fg-color:           #0A0E17;
  --md-default-fg-color--light:    #334155;
  --md-default-fg-color--lighter:  #64748B;
  --md-default-fg-color--lightest: #E2E8F0;

  --md-primary-fg-color:           #FFFFFF;
  --md-primary-fg-color--light:    #F8FAFC;
  --md-primary-fg-color--dark:     #E2E8F0;
  --md-primary-bg-color:           #0A0E17;
  --md-primary-bg-color--light:    #334155;

  --md-accent-fg-color:                 #10B981;
  --md-accent-fg-color--transparent:    rgba(16, 185, 129, 0.10);
  --md-accent-bg-color:                 #FFFFFF;
  --md-accent-bg-color--light:          #F1F5F9;

  --md-typeset-a-color:            #10B981;

  --md-code-bg-color:              #F1F5F9;
  --md-code-fg-color:              #0A0E17;

  --md-admonition-bg-color:        #F8FAFC;
  --md-admonition-fg-color:        #334155;
}

/* Typography — Manrope for prose, JetBrains Mono for code (matches SPA) */
body,
.md-typeset {
  font-family: 'Manrope', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif !important;
  font-feature-settings: 'cv11', 'ss01';
}
.md-typeset code,
.md-typeset pre,
code, pre, kbd {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important;
}

/* Headline rhythm — distinctive, brand-tuned */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 2.1rem;
  line-height: 1.15;
  margin-top: 0.2em;
  margin-bottom: 0.6em;
}
.md-typeset h1 + p {
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.55;
  margin-bottom: 1.8em;
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.4em;
  padding-top: 0.6em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.8em;
}

/* Header — flat, brand-black, no shadow */
.md-header {
  background-color: var(--md-primary-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-header__title {
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* Sidebars — match the SPA's dark left nav */
.md-sidebar {
  background-color: var(--md-default-bg-color);
}
.md-nav__title {
  color: var(--md-default-fg-color--lighter);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.md-nav__link {
  color: var(--md-default-fg-color--light);
}
.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--md-accent-fg-color);
}
.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

/* Search — surface tint matches SPA */
.md-search__form {
  background-color: var(--md-default-bg-color--lighter);
  border-radius: 6px;
}
.md-search__input {
  color: var(--md-default-fg-color);
}
.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* Screenshot frames — soft border, no shadow */
.md-typeset img {
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  max-width: 100%;
  display: block;
}

/* Admonitions — flat panel, accent stripe on left */
.md-typeset .admonition,
.md-typeset details {
  background-color: var(--md-admonition-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before {
  background-color: var(--md-accent-fg-color);
}

/* Tables — borderless, subtle row separators */
.md-typeset table:not([class]) {
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color);
  font-weight: 700;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) tr:not(:last-child) td {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Right-rail TOC — match SPA's secondary text rhythm */
.md-nav--secondary .md-nav__title {
  color: var(--md-default-fg-color--lighter);
}

/* Buttons + CTAs — emerald accent */
.md-button {
  background-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  border: none;
  border-radius: 6px;
  font-weight: 700;
}
.md-button:hover {
  background-color: var(--md-accent-fg-color);
  opacity: 0.92;
  color: var(--md-accent-bg-color);
}

/* Footer — austere, brand-aligned */
.md-footer {
  background-color: var(--md-primary-fg-color);
}
.md-footer-meta {
  background-color: var(--md-primary-fg-color--dark);
}

/* Cards on the index page (grid cards extension) */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card,
.md-typeset .grid.cards > .card {
  background-color: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}

/* Scrollbar — match SPA's chrome */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--md-default-bg-color); }
::-webkit-scrollbar-thumb { background: var(--md-default-fg-color--lightest); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-default-fg-color--lighter); }