/* ==============================================================================
   Catppuccin Mocha Palette for Material for MkDocs
   ============================================================================== */

:root > * {
  /* Catppuccin Mocha Design Tokens */
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo: #f2cdcd;
  --ctp-pink: #f5c2e7;
  --ctp-mauve: #cba6f7;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;
  --ctp-teal: #94e2d5;
  --ctp-sky: #89dceb;
  --ctp-sapphire: #74c7ec;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay2: #9399b2;
  --ctp-overlay1: #7f849c;
  --ctp-overlay0: #6c7086;
  --ctp-surface2: #585b70;
  --ctp-surface1: #45475a;
  --ctp-surface0: #313244;
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
}

[data-md-color-scheme="slate"] {
  /* Slate scheme mapped to Catppuccin Mocha */
  --md-default-bg-color: var(--ctp-base);
  --md-default-bg-color--light: var(--ctp-surface0);
  --md-default-bg-color--lighter: var(--ctp-surface1);
  --md-default-bg-color--lightest: var(--ctp-surface2);

  --md-default-fg-color: var(--ctp-text);
  --md-default-fg-color--light: var(--ctp-subtext1);
  --md-default-fg-color--lighter: var(--ctp-subtext0);
  --md-default-fg-color--lightest: var(--ctp-overlay1);

  /* Primary & Accent Branding */
  --md-primary-fg-color: var(--ctp-mantle);
  --md-primary-fg-color--light: var(--ctp-surface0);
  --md-primary-fg-color--dark: var(--ctp-crust);
  --md-primary-bg-color: var(--ctp-text);

  --md-accent-fg-color: var(--ctp-mauve);
  --md-accent-fg-color--transparent: rgba(203, 166, 247, 0.15);

  /* Code Blocks */
  --md-code-bg-color: var(--ctp-crust);
  --md-code-fg-color: var(--ctp-text);
  --md-code-hl-color: rgba(203, 166, 247, 0.12);
  --md-code-hl-keyword-color: var(--ctp-mauve);
  --md-code-hl-function-color: var(--ctp-blue);
  --md-code-hl-string-color: var(--ctp-green);
  --md-code-hl-number-color: var(--ctp-peach);
  --md-code-hl-comment-color: var(--ctp-overlay0);

  /* Types & Admonitions */
  --md-admonition-bg-color: var(--ctp-mantle);
  --md-typeset-a-color: var(--ctp-sapphire);
  --md-typeset-kbd-color: var(--ctp-surface0);
  --md-typeset-kbd-border-color: var(--ctp-surface2);

  /* Borders & Dividers */
  --md-divider-color: var(--ctp-surface0);
  --md-shadow-z1: 0 4px 12px rgba(17, 17, 27, 0.4);
}

/* Rounded Cards & Smooth Transitions */
.md-typeset .admonition {
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(17, 17, 27, 0.25);
  border-left-width: 4px;
}

.md-typeset pre > code {
  border-radius: 0.5rem;
  border: 1px solid var(--ctp-surface0);
}

.md-header {
  border-bottom: 1px solid var(--ctp-surface0);
}

.md-tabs {
  background-color: var(--ctp-crust);
  border-bottom: 1px solid var(--ctp-surface0);
}

.md-sidebar--primary {
  border-right: 1px solid var(--ctp-surface0);
}

/* Table Enhancements */
.md-typeset table:not([class]) {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--ctp-surface0);
}

.md-typeset table:not([class]) th {
  background-color: var(--ctp-surface0);
  color: var(--ctp-mauve);
  font-weight: 600;
}

/* ==============================================================================
   Mermaid Diagrams - Catppuccin Mocha High-Contrast Theming
   ============================================================================== */

[data-md-color-scheme="slate"] .mermaid {
  background-color: var(--ctp-crust) !important;
  border-radius: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--ctp-surface0);
}

/* Subgraphs / Cluster Boxes */
[data-md-color-scheme="slate"] .mermaid .cluster rect {
  fill: var(--ctp-mantle) !important;
  stroke: var(--ctp-surface2) !important;
  stroke-width: 1.5px !important;
  rx: 8px !important;
  ry: 8px !important;
}

[data-md-color-scheme="slate"] .mermaid .cluster .cluster-label,
[data-md-color-scheme="slate"] .mermaid .cluster text,
[data-md-color-scheme="slate"] .mermaid .cluster span,
[data-md-color-scheme="slate"] .mermaid g.cluster text {
  fill: var(--ctp-mauve) !important;
  color: var(--ctp-mauve) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* Individual Nodes */
[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node polygon,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node ellipse,
[data-md-color-scheme="slate"] .mermaid .node path {
  fill: var(--ctp-surface0) !important;
  stroke: var(--ctp-sapphire) !important;
  stroke-width: 1.5px !important;
  rx: 6px !important;
  ry: 6px !important;
}

/* Node Labels & Text */
[data-md-color-scheme="slate"] .mermaid .node .label,
[data-md-color-scheme="slate"] .mermaid .node text,
[data-md-color-scheme="slate"] .mermaid .node span,
[data-md-color-scheme="slate"] .mermaid .node div {
  fill: var(--ctp-text) !important;
  color: var(--ctp-text) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

/* Flowchart Edges / Lines */
[data-md-color-scheme="slate"] .mermaid .edgePath path,
[data-md-color-scheme="slate"] .mermaid path.flowchart-link {
  stroke: var(--ctp-overlay1) !important;
  stroke-width: 1.8px !important;
}

[data-md-color-scheme="slate"] .mermaid .arrowheadPath,
[data-md-color-scheme="slate"] .mermaid marker path {
  fill: var(--ctp-overlay1) !important;
  stroke: var(--ctp-overlay1) !important;
}

/* Edge Labels (Annotations on lines) */
[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface1) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel rect {
  fill: var(--ctp-mantle) !important;
  opacity: 0.95 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel span,
[data-md-color-scheme="slate"] .mermaid .edgeLabel text,
[data-md-color-scheme="slate"] .mermaid .edgeLabel p {
  fill: var(--ctp-peach) !important;
  color: var(--ctp-peach) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}