/**
 * Loper Brand Customization
 * Custom styles for MkDocs Material theme
 */

/* ============================================
   Loper Brand Color Palette
   ============================================ */

:root {
  /* Primary Brand Colors */
  --loper-brand-white: #FFFFFF;
  --loper-brand-solid-black: #232323;
  --loper-brand-dark-purple: #050C9F;
  --loper-brand-bold-purple: #503EF1;
  --loper-brand-light-purple: #987DFF;
  --loper-brand-light-blue: #F1F6FF;
  --loper-brand-orange: #FFA37A;
  --loper-brand-red: #FC5555;
  --loper-brand-cloud: #FFF2F2;

  /* Neutrals */
  --loper-neutral-50: #F9FAFB;
  --loper-neutral-200: #EAECF0;
  --loper-neutral-300: #D0D5DD;
  --loper-neutral-400: #98A2B3;
  --loper-neutral-500: #667085;
  --loper-neutral-600: #475467;
  --loper-neutral-700: #344054;
  --loper-neutral-800: #1D2939;
  --loper-neutral-900: #101828;

  /* Purple Scale */
  --loper-purple-50: #F3F2FF;
  --loper-purple-100: #E2DFFF;
  --loper-purple-200: #C1BAFF;
  --loper-purple-300: #987DFF;
  --loper-purple-400: #7364FA;
  --loper-purple-500: #503EF1;
  --loper-purple-600: #4411D4;
  --loper-purple-700: #050C9F;
  --loper-purple-800: #090077;
  --loper-purple-900: #030865;

  /* Blue Scale */
  --loper-blue-50: #F9FCFF;
  --loper-blue-100: #F4FAFF;
  --loper-blue-200: #F1F6FF;
  --loper-blue-300: #DBE7FC;
  --loper-blue-400: #AAC9FF;
  --loper-blue-500: #83B0FF;
  --loper-blue-600: #619AFF;
  --loper-blue-700: #2D6CDB;
  --loper-blue-800: #134BAD;
  --loper-blue-900: #012F7F;

  /* Orange Scale */
  --loper-orange-50: #FFF9F1;
  --loper-orange-100: #FFEED5;
  --loper-orange-200: #FFD4AC;
  --loper-orange-300: #FFB68D;
  --loper-orange-400: #FFA37A;
  --loper-orange-500: #FF824B;
  --loper-orange-600: #E26E1A;
  --loper-orange-700: #C3580B;
  --loper-orange-800: #983F00;
  --loper-orange-900: #712F00;

  /* Success Colors */
  --loper-success-50: #ECFDF3;
  --loper-success-200: #ABEFC6;
  --loper-success-300: #73d1a5;
  --loper-success-500: #17B26A;
  --loper-success-700: #067647;
  --loper-success-900: #074D31;

  /* Error Colors */
  --loper-error-50: #FEF3F2;
  --loper-error-200: #FECDCA;
  --loper-error-300: #f58f86;
  --loper-error-500: #F04438;
  --loper-error-700: #B42318;
  --loper-error-900: #7A271A;

  /* Warning Colors */
  --loper-warning-50: #FFFAEB;
  --loper-warning-200: #FEDF89;
  --loper-warning-500: #F79009;
  --loper-warning-700: #B54708;
  --loper-warning-900: #7A2E0E;
}

/* ============================================
   Light Mode Theme
   ============================================ */

[data-md-color-scheme="default"] {
  /* Primary colors - Loper Purple */
  --md-primary-fg-color: var(--loper-brand-bold-purple);
  --md-primary-fg-color--light: var(--loper-purple-300);
  --md-primary-fg-color--dark: var(--loper-brand-dark-purple);

  /* Accent colors - Loper Orange */
  --md-accent-fg-color: var(--loper-brand-orange);
  --md-accent-fg-color--transparent: rgba(255, 163, 122, 0.1);

  /* Text colors */
  --md-typeset-color: var(--loper-neutral-900);
  --md-typeset-a-color: var(--loper-purple-600);

  /* Code block colors */
  --md-code-bg-color: var(--loper-neutral-50);
  --md-code-fg-color: var(--loper-neutral-900);

  /* Background colors */
  --md-default-bg-color: #FFFFFF;
  --md-default-fg-color: var(--loper-neutral-900);
  --md-default-fg-color--light: var(--loper-neutral-600);
  --md-default-fg-color--lighter: var(--loper-neutral-500);
  --md-default-fg-color--lightest: var(--loper-neutral-400);
}

/* ============================================
   Dark Mode Theme
   ============================================ */

[data-md-color-scheme="slate"] {
  /* Primary colors - Lighter purple for dark mode */
  --md-primary-fg-color: var(--loper-purple-400);
  --md-primary-fg-color--light: var(--loper-purple-300);
  --md-primary-fg-color--dark: var(--loper-purple-500);

  /* Accent colors - Brighter orange for dark mode */
  --md-accent-fg-color: var(--loper-orange-400);
  --md-accent-fg-color--transparent: rgba(255, 163, 122, 0.1);

  /* Background colors */
  --md-default-bg-color: var(--loper-neutral-900);
  --md-default-fg-color: var(--loper-neutral-50);
  --md-default-fg-color--light: var(--loper-neutral-300);
  --md-default-fg-color--lighter: var(--loper-neutral-400);
  --md-default-fg-color--lightest: var(--loper-neutral-500);

  /* Code block colors */
  --md-code-bg-color: var(--loper-neutral-800);
  --md-code-fg-color: var(--loper-neutral-50);

  /* Link colors */
  --md-typeset-a-color: var(--loper-purple-300);
}

/* ============================================
   Typography - DM Sans & Prompt
   ============================================ */

:root {
  /* Regular font: DM Sans */
  --md-text-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Monospace font: JetBrains Mono */
  --md-code-font: "JetBrains Mono", "Roboto Mono", "Courier New", monospace;
}

/* Use Prompt for headings */
h1, h2, h3, h4, h5, h6,
.md-header__title,
.md-nav__title {
  font-family: "Prompt", var(--md-text-font);
  font-weight: 600;
}

/* ============================================
   Rounded Corners
   ============================================ */

/* Code blocks */
.md-typeset pre,
.md-typeset code {
  border-radius: 8px;
}

/* Inline code */
.md-typeset code {
  border-radius: 4px;
}

/* Buttons */
.md-button {
  border-radius: 8px;
}

/* Admonitions */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
}

/* Search box */
.md-search__input {
  border-radius: 8px;
}

/* Cards (on homepage) */
.md-typeset .grid {
  gap: 1rem;
}

/* ============================================
   Admonition Colors (using Loper palette)
   ============================================ */

/* Info admonition - Blue */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--loper-blue-500);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: rgba(131, 176, 255, 0.1);
  border-color: var(--loper-blue-500);
}

/* Success admonition - Green */
.md-typeset .admonition.success,
.md-typeset details.success {
  border-color: var(--loper-success-500);
}

.md-typeset .success > .admonition-title,
.md-typeset .success > summary {
  background-color: rgba(23, 178, 106, 0.1);
  border-color: var(--loper-success-500);
}

/* Warning admonition - Orange */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--loper-warning-500);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(247, 144, 9, 0.1);
  border-color: var(--loper-warning-500);
}

/* Danger/Error admonition - Red */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--loper-error-500);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(240, 68, 56, 0.1);
  border-color: var(--loper-error-500);
}

/* ============================================
   Code Block Enhancements
   ============================================ */

/* Line numbers styling */
.md-typeset .highlight .linenos {
  color: var(--loper-neutral-500);
  user-select: none;
}

/* Copy button */
.md-clipboard {
  color: var(--loper-neutral-600);
}

.md-clipboard:hover {
  color: var(--loper-purple-500);
}

/* ============================================
   Navigation Enhancements
   ============================================ */

/* Active nav item */
.md-nav__link--active {
  color: var(--loper-brand-bold-purple);
  font-weight: 600;
}

/* Nav link hover */
.md-nav__link:hover {
  color: var(--loper-purple-500);
}

/* ============================================
   Custom Utilities
   ============================================ */

/* Logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 32px;
  width: auto;
}

/* Footer adjustments */
.md-footer-meta {
  background-color: var(--md-default-bg-color);
  border-top: 1px solid var(--loper-neutral-200);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  border-top-color: var(--loper-neutral-700);
}

/* ============================================
   Mermaid Diagram Enhancements
   ============================================ */

/* Make Mermaid diagrams larger and more readable */
.mermaid {
  text-align: center;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--md-code-bg-color);
  border-radius: 12px;
  border: 1px solid var(--loper-neutral-200);
}

[data-md-color-scheme="slate"] .mermaid {
  border-color: var(--loper-neutral-700);
}

.mermaid svg {
  max-width: 100%;
  height: auto !important;
  min-height: 700px !important;
  /* Force diagram to scale properly */
  width: 100% !important;
  transform: scale(1.1);
  transform-origin: top center;
}

/* Increase font sizes in Mermaid diagrams */
.mermaid .nodeLabel {
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--md-text-font) !important;
}

.mermaid .edgeLabel {
  font-size: 13px !important;
  font-weight: 500 !important;
  background-color: var(--md-default-bg-color) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Make cluster/subgraph labels more prominent */
.mermaid .cluster-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: "Prompt", var(--md-text-font) !important;
}

/* Improve node styling */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
  stroke-width: 3px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Improve edge/arrow styling */
.mermaid .edgePath .path {
  stroke-width: 2.5px !important;
}

.mermaid .marker {
  stroke-width: 2px !important;
}

/* Make the content area wider for architecture diagrams */
.md-content__inner {
  max-width: 100%;
}

/* Add subtle animation on load */
.mermaid svg {
  animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}