/* ================================================================
   Legal Agent for Word — Documentation Theme
   ================================================================
   A clean, high-contrast theme inspired by Stripe/Vercel docs.
   Optimised for readability in both light and dark modes,
   with special attention to Japanese (Noto Sans JP) typography.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS — Light Mode
   ---------------------------------------------------------------- */
:root {
  /* Brand */
  --la-blue-50: #eff4ff;
  --la-blue-100: #dbe6fe;
  --la-blue-200: #bfcffd;
  --la-blue-400: #7ea3fb;
  --la-blue-500: #3b6af6;
  --la-blue-600: #2750d9;
  --la-blue-700: #1e3fba;

  /* Neutral palette (slate) */
  --la-gray-50: #f8fafc;
  --la-gray-100: #f1f5f9;
  --la-gray-200: #e2e8f0;
  --la-gray-300: #cbd5e1;
  --la-gray-400: #94a3b8;
  --la-gray-500: #64748b;
  --la-gray-600: #475569;
  --la-gray-700: #334155;
  --la-gray-800: #1e293b;
  --la-gray-900: #0f172a;
  --la-gray-950: #020617;

  /* Semantic tokens — Light */
  --la-bg: #ffffff;
  --la-bg-subtle: var(--la-gray-50);
  --la-fg: var(--la-gray-900);
  --la-fg-muted: var(--la-gray-500);
  --la-fg-subtle: var(--la-gray-400);
  --la-primary: var(--la-blue-500);
  --la-primary-hover: var(--la-blue-600);
  --la-border: var(--la-gray-200);
  --la-border-subtle: var(--la-gray-100);

  /* Table */
  --la-table-header-bg: var(--la-gray-50);
  --la-table-header-fg: var(--la-gray-600);
  --la-table-stripe: var(--la-gray-50);
  --la-table-border: var(--la-gray-200);
  --la-table-hover: var(--la-blue-50);

  /* Code */
  --la-code-bg: var(--la-gray-100);
  --la-code-fg: var(--la-gray-800);

  /* Shadows */
  --la-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --la-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --la-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);

  /* Radius */
  --la-radius-sm: 6px;
  --la-radius-md: 8px;
  --la-radius-lg: 10px;
}

/* ----------------------------------------------------------------
   2. LIGHT SCHEME — Material overrides
   ---------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--la-bg);
  --md-default-bg-color--light: var(--la-bg-subtle);
  --md-default-fg-color: var(--la-fg);
  --md-default-fg-color--light: var(--la-gray-600);
  --md-default-fg-color--lighter: var(--la-gray-400);
  --md-default-fg-color--lightest: var(--la-gray-200);

  --md-primary-fg-color: var(--la-blue-500);
  --md-primary-fg-color--light: var(--la-blue-400);
  --md-primary-fg-color--dark: var(--la-blue-700);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--la-blue-600);
  --md-accent-fg-color--transparent: rgba(59, 106, 246, 0.1);

  --md-typeset-a-color: var(--la-blue-600);
  --md-typeset-color: var(--la-fg);
  --md-typeset-table-color: var(--la-gray-200);
  --md-typeset-table-color--light: var(--la-gray-50);

  --md-code-bg-color: var(--la-code-bg);
  --md-code-fg-color: var(--la-code-fg);
  --md-code-hl-color: rgba(59, 106, 246, 0.12);

  --md-admonition-bg-color: var(--la-bg);
  --md-admonition-fg-color: var(--la-fg);

  --md-footer-bg-color: var(--la-gray-900);
  --md-footer-bg-color--dark: var(--la-gray-950);
}

/* ----------------------------------------------------------------
   3. DARK SCHEME — Material overrides
   ----------------------------------------------------------------
   Design principles for dark mode:
   - Background: dark-navy (not pure black — easier on eyes)
   - Text: off-white (#e2e8f0) at ~87% brightness — not pure white
   - Borders: visible but not harsh
   - Tables & code: slightly lighter surface
   ---------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;

  /* Override semantic tokens for dark */
  --la-bg: #0f1219;
  --la-bg-subtle: #161b26;
  --la-fg: #e2e8f0;
  --la-fg-muted: #94a3b8;
  --la-fg-subtle: #64748b;
  --la-primary: #5c87ff;
  --la-primary-hover: #7ea3fb;
  --la-border: #1e293b;
  --la-border-subtle: #1a2234;

  /* Table — dark */
  --la-table-header-bg: #161b26;
  --la-table-header-fg: #94a3b8;
  --la-table-stripe: rgba(255, 255, 255, 0.02);
  --la-table-border: #1e293b;
  --la-table-hover: rgba(92, 135, 255, 0.06);

  /* Code — dark */
  --la-code-bg: #161b26;
  --la-code-fg: #c9d1d9;

  /* Shadows — dark */
  --la-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --la-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --la-shadow-md:
    0 4px 8px -2px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);

  /* Material overrides */
  --md-default-bg-color: var(--la-bg);
  --md-default-bg-color--light: var(--la-bg-subtle);
  --md-default-fg-color: var(--la-fg);
  --md-default-fg-color--light: #b0bec5;
  --md-default-fg-color--lighter: #78909c;
  --md-default-fg-color--lightest: #37474f;

  --md-primary-fg-color: #5c87ff;
  --md-primary-fg-color--light: #7ea3fb;
  --md-primary-fg-color--dark: #3b6af6;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #7ea3fb;
  --md-accent-fg-color--transparent: rgba(92, 135, 255, 0.12);

  --md-typeset-a-color: #7ea3fb;
  --md-typeset-color: var(--la-fg);
  --md-typeset-table-color: var(--la-table-border);
  --md-typeset-table-color--light: var(--la-table-stripe);

  --md-code-bg-color: var(--la-code-bg);
  --md-code-fg-color: var(--la-code-fg);
  --md-code-hl-color: rgba(92, 135, 255, 0.15);

  /* Syntax highlighting — dark-friendly palette */
  --md-code-hl-number-color: #b5cea8;
  --md-code-hl-string-color: #ce9178;
  --md-code-hl-keyword-color: #569cd6;
  --md-code-hl-function-color: #dcdcaa;
  --md-code-hl-constant-color: #9cdcfe;
  --md-code-hl-special-color: #c586c0;
  --md-code-hl-comment-color: #6a9955;
  --md-code-hl-operator-color: #d4d4d4;

  --md-admonition-bg-color: var(--la-bg-subtle);
  --md-admonition-fg-color: var(--la-fg);

  --md-footer-bg-color: #080b11;
  --md-footer-bg-color--dark: #050710;
}

/* ----------------------------------------------------------------
   4. GLOBAL TYPOGRAPHY
   ---------------------------------------------------------------- */

/* Improved line-height for Japanese text readability */
.md-typeset {
  font-size: 0.78rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Content max-width for comfortable reading */
.md-content__inner {
  max-width: 52rem;
}

/* Paragraph spacing */
.md-typeset p {
  margin-bottom: 1em;
}

/* ----------------------------------------------------------------
   5. HEADER
   ---------------------------------------------------------------- */
.md-header {
  background: var(--la-gray-900);
  border-bottom: 1px solid var(--la-border);
  box-shadow: none;
  font-size: 0.82rem;
}

[data-md-color-scheme="slate"] .md-header {
  background: #0a0e17;
  border-bottom: 1px solid var(--la-border);
}

/* Header inner — compact height */
.md-header__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* Header title — refined sizing */
.md-header__topic {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Header icons — compact sizing */
.md-search__icon svg,
.md-source__icon svg,
.md-header__button:not(.md-logo) svg {
  width: 18px;
  height: 18px;
}

/* Header buttons — compact icons */
.md-header__button:not(.md-logo) {
  padding: 6px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.md-header__button:not(.md-logo):hover {
  opacity: 1;
}

/* Logo — slightly smaller */
.md-header__button.md-logo {
  padding: 6px;
}

.md-header__button.md-logo img {
  width: 22px;
  height: 22px;
}

/* Language selector — compact */
.md-select__inner {
  font-size: 0.75rem;
}

/* Search bar */
.md-search__form {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--la-radius-md);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.md-search__form:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Source link (GitHub) in header — compact */
.md-source {
  font-size: 0.7rem;
  max-width: 11rem;
}

/* ----------------------------------------------------------------
   6. CONTENT AREA
   ---------------------------------------------------------------- */
.md-main__inner {
  margin-top: 0;
}

/* ----------------------------------------------------------------
   7. HEADINGS
   ---------------------------------------------------------------- */

/* H1 — Clean, prominent, no gradient banner.
   A polished underline treatment with brand color accent. */
.md-typeset h1 {
  font-weight: 700;
  font-size: 1.55em;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--la-primary);
  color: var(--la-fg);
}

/* Permalink icon inside h1 */
.md-typeset h1 .headerlink {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.md-typeset h1:hover .headerlink {
  opacity: 0.4;
}

/* H2 — Section separator */
.md-typeset h2 {
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: -0.01em;
  margin-top: 2.2rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--la-border);
  color: var(--la-fg);
}

/* H3 */
.md-typeset h3 {
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: -0.005em;
  margin-top: 1.6rem;
  color: var(--la-fg);
}

/* H4 */
.md-typeset h4 {
  font-weight: 600;
  font-size: 0.95em;
  margin-top: 1.3rem;
  color: var(--md-default-fg-color--light);
}

/* ----------------------------------------------------------------
   8. LINKS
   ---------------------------------------------------------------- */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* Content links — underline by default for clarity */
.md-content a:not(.md-button):not(.headerlink):not([class^="md-"]) {
  border-bottom: 1px solid var(--md-typeset-a-color);
  opacity: 1;
}

.md-content a:not(.md-button):not(.headerlink):not([class^="md-"]):hover {
  opacity: 0.8;
}

/* ----------------------------------------------------------------
   9. TABLES — Clean, readable, high contrast
   ---------------------------------------------------------------- */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--la-table-border);
  border-radius: var(--la-radius-md);
  overflow: hidden;
  box-shadow: var(--la-shadow-xs);
  font-size: 0.85em;
  line-height: 1.7;
}

/* Table header */
.md-typeset table:not([class]) th {
  background: var(--la-table-header-bg);
  color: var(--la-table-header-fg);
  font-weight: 600;
  font-size: 0.88em;
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--la-table-border);
  text-align: left;
  white-space: nowrap;
}

/* Table cells */
.md-typeset table:not([class]) td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--la-border-subtle);
  color: var(--la-fg);
  vertical-align: top;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-bottom-color: var(--la-table-border);
}

/* Last row — no border */
.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

/* Hover state */
.md-typeset table:not([class]) tbody tr:hover td {
  background: var(--la-table-hover);
}

/* Zebra striping — very subtle */
.md-typeset table:not([class]) tbody tr:nth-child(even) td {
  background: var(--la-table-stripe);
}

.md-typeset table:not([class]) tbody tr:nth-child(even):hover td {
  background: var(--la-table-hover);
}

/* ----------------------------------------------------------------
   10. CODE BLOCKS
   ---------------------------------------------------------------- */
.md-typeset code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
  background: var(--la-code-bg);
  color: var(--la-code-fg);
  border: 1px solid var(--la-border-subtle);
}

[data-md-color-scheme="slate"] .md-typeset code {
  border-color: var(--la-border);
}

/* Fenced code blocks */
.md-typeset pre {
  border-radius: var(--la-radius-md);
  border: 1px solid var(--la-border);
  box-shadow: var(--la-shadow-xs);
}

.md-typeset pre > code {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.85em;
  line-height: 1.65;
}

/* Code copy button */
.md-typeset .md-clipboard {
  color: var(--la-fg-subtle);
}

.md-typeset .md-clipboard:hover {
  color: var(--la-fg-muted);
}

/* ----------------------------------------------------------------
   11. ADMONITIONS
   ---------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--la-radius-md);
  border-width: 1px;
  border-left-width: 4px;
  box-shadow: var(--la-shadow-xs);
  font-size: 0.88em;
}

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

/* ----------------------------------------------------------------
   12. BLOCKQUOTES
   ---------------------------------------------------------------- */
.md-typeset blockquote {
  border-left: 3px solid var(--la-primary);
  padding-left: 1em;
  color: var(--la-fg-muted);
  font-size: 0.95em;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left-color: rgba(92, 135, 255, 0.4);
  color: var(--la-fg-muted);
}

/* ----------------------------------------------------------------
   13. SIDEBAR — Clear hierarchy, active state
   ---------------------------------------------------------------- */

/* Sidebar background */
.md-sidebar {
  border-right: 1px solid var(--la-border-subtle);
}

[data-md-color-scheme="slate"] .md-sidebar {
  border-right-color: var(--la-border);
}

/* Nav links base */
.md-nav__link {
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.3rem 0.55rem;
  border-radius: var(--la-radius-sm);
  color: var(--la-fg-muted);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

/* Nav section titles (top-level expandable groups) */
.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--la-fg);
  margin-top: 0.5rem;
}

[data-md-color-scheme="slate"]
  .md-nav--primary
  > .md-nav__list
  > .md-nav__item--nested
  > .md-nav__link {
  color: var(--la-fg);
}

/* Hover state */
.md-nav__link:hover {
  color: var(--la-fg);
  background: var(--la-bg-subtle);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Active page */
.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  font-weight: 600;
  color: var(--la-primary);
}

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

/* Active page — background highlight */
.md-sidebar--primary .md-nav__item--active > .md-nav__link:not(label) {
  background: rgba(59, 106, 246, 0.06);
  border-radius: var(--la-radius-sm);
}

[data-md-color-scheme="slate"]
  .md-sidebar--primary
  .md-nav__item--active
  > .md-nav__link:not(label) {
  background: rgba(92, 135, 255, 0.08);
}

/* ----------------------------------------------------------------
   14. TABLE OF CONTENTS (right sidebar)
   ---------------------------------------------------------------- */
.md-sidebar--secondary .md-nav__link {
  font-size: 0.68rem;
  color: var(--la-fg-subtle);
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--la-primary);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__link--active {
  color: #7ea3fb;
}

/* ----------------------------------------------------------------
   15. TABS (pymdownx.tabbed)
   ---------------------------------------------------------------- */
.md-typeset .tabbed-labels > label {
  font-size: 0.82em;
  font-weight: 500;
  padding: 0.5em 1em;
  border-radius: var(--la-radius-sm) var(--la-radius-sm) 0 0;
}

/* ----------------------------------------------------------------
   16. LISTS
   ---------------------------------------------------------------- */
.md-typeset ul,
.md-typeset ol {
  line-height: 1.8;
}

.md-typeset li + li {
  margin-top: 0.15em;
}

/* ----------------------------------------------------------------
   17. HORIZONTAL RULE
   ---------------------------------------------------------------- */
.md-typeset hr {
  border-color: var(--la-border);
}

/* ----------------------------------------------------------------
   18. FOOTER
   ---------------------------------------------------------------- */
.md-footer {
  border-top: 1px solid var(--la-border);
}

.md-footer-meta {
  font-size: 0.78rem;
}

/* ----------------------------------------------------------------
   19. SCROLLBAR (for sidebar, code blocks)
   ---------------------------------------------------------------- */
.md-sidebar::-webkit-scrollbar,
.md-typeset pre::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.md-sidebar::-webkit-scrollbar-thumb,
.md-typeset pre::-webkit-scrollbar-thumb {
  background: var(--la-border);
  border-radius: 3px;
}

[data-md-color-scheme="slate"] .md-sidebar::-webkit-scrollbar-thumb,
[data-md-color-scheme="slate"] .md-typeset pre::-webkit-scrollbar-thumb {
  background: var(--la-border);
}

/* ----------------------------------------------------------------
   20. SELECTION HIGHLIGHT
   ---------------------------------------------------------------- */
::selection {
  background: rgba(59, 106, 246, 0.2);
}

[data-md-color-scheme="slate"] ::selection {
  background: rgba(92, 135, 255, 0.25);
}

/* ----------------------------------------------------------------
   21. NAVIGATION TABS (if enabled)
   ---------------------------------------------------------------- */
.md-tabs {
  background: var(--la-gray-800);
  border-bottom: 1px solid var(--la-border);
}

[data-md-color-scheme="slate"] .md-tabs {
  background: #0a0e17;
}

/* ----------------------------------------------------------------
   22. RESPONSIVE — Ensure mobile readability
   ---------------------------------------------------------------- */
@media screen and (max-width: 76.25em) {
  .md-typeset {
    font-size: 0.76rem;
    line-height: 1.8;
  }
}

/* ----------------------------------------------------------------
   23. PRINT
   ---------------------------------------------------------------- */
@media print {
  .md-typeset h1 {
    border-bottom: 2px solid #000;
  }

  .md-typeset table:not([class]) {
    box-shadow: none;
  }
}