/* Catppuccin Frappé Theme for MkDocs Material */
/* Matching the landing site color scheme */

:root {
  /* Catppuccin Frappé Colors */
  --cp-rosewater: #f2d5cf;
  --cp-flamingo: #eebebe;
  --cp-pink: #f4b8e4;
  --cp-mauve: #ca9ee6;
  --cp-red: #e78284;
  --cp-maroon: #ea999c;
  --cp-peach: #ef9f76;
  --cp-yellow: #e5c890;
  --cp-green: #a6d189;
  --cp-teal: #81c8be;
  --cp-sky: #99d1db;
  --cp-sapphire: #85c1dc;
  --cp-blue: #8caaee;
  --cp-lavender: #babbf1;
  --cp-text: #c6d0f5;
  --cp-subtext1: #b5bfe2;
  --cp-subtext0: #a5adce;
  --cp-overlay2: #949cbb;
  --cp-overlay1: #838ba7;
  --cp-overlay0: #737994;
  --cp-surface2: #626880;
  --cp-surface1: #51576d;
  --cp-surface0: #414559;
  --cp-base: #303446;
  --cp-mantle: #292c3c;
  --cp-crust: #232634;
  
  /* Brand Colors (matching landing site) */
  --cp-accent-primary: var(--cp-teal);
  --cp-accent-secondary: var(--cp-blue);
}

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* Override Material Design Colors */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--cp-accent-primary);
  --md-primary-fg-color--light: var(--cp-accent-secondary);
  --md-primary-fg-color--dark: var(--cp-teal);
  --md-accent-fg-color: var(--cp-accent-secondary);
  --md-accent-fg-color--transparent: rgba(140, 170, 238, 0.1);
  
  /* Background Colors */
  --md-default-bg-color: var(--cp-base);
  --md-default-fg-color: var(--cp-text);
  --md-default-fg-color--light: var(--cp-subtext1);
  --md-default-fg-color--lighter: var(--cp-subtext0);
  --md-default-fg-color--lightest: var(--cp-overlay2);
  
  /* Code Colors */
  --md-code-bg-color: var(--cp-surface0);
  --md-code-fg-color: var(--cp-text);
  
  /* Footer */
  --md-footer-bg-color: var(--cp-mantle);
  --md-footer-bg-color--dark: var(--cp-crust);
  --md-footer-fg-color: var(--cp-subtext1);
  --md-footer-fg-color--light: var(--cp-overlay2);
  --md-footer-fg-color--lighter: var(--cp-overlay1);
}

[data-md-color-scheme="slate"] {
  --md-hue: 210;
  --md-default-bg-color: var(--cp-base);
  --md-default-fg-color: var(--cp-text);
  --md-default-fg-color--light: var(--cp-subtext1);
  --md-default-fg-color--lighter: var(--cp-subtext0);
  --md-default-fg-color--lightest: var(--cp-overlay2);
  
  --md-primary-fg-color: var(--cp-accent-primary);
  --md-accent-fg-color: var(--cp-accent-secondary);
  
  --md-code-bg-color: var(--cp-surface0);
  --md-code-fg-color: var(--cp-text);
}

/* Header Styling */
.md-header {
  background: var(--cp-crust) !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.md-header__title {
  font-family: 'Reddit Sans', sans-serif;
  font-weight: 700;
  color: var(--cp-text) !important;
}

.md-header__button {
  color: var(--cp-text) !important;
}

/* Navigation Styling */
.md-nav__title {
  background: transparent !important;
  color: var(--cp-text) !important;
  border-bottom: none !important;
}

.md-nav__link {
  color: var(--cp-subtext1) !important;
  transition: all 0.2s ease;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--cp-rosewater) !important;
}

.md-nav__link--active {
  color: var(--cp-accent-primary) !important;
  font-weight: 600;
}

/* Sidebar */
.md-sidebar {
  background: transparent !important;
  border-right: none !important;
}

.md-sidebar--secondary {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
}

/* Content Area */
.md-content {
  background: var(--cp-base) !important;
}

.md-content__inner {
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Typography */
.md-typeset {
  font-family: 'Reddit Sans', sans-serif;
  color: var(--cp-text);
  line-height: 1.6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--cp-text);
  font-weight: 600;
}

.md-typeset h1 {
  color: var(--cp-accent-primary);
  border-bottom: 2px solid var(--cp-accent-primary);
  padding-bottom: 0.5rem;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--cp-overlay0);
  padding-bottom: 0.3rem;
}

/* Code Blocks */
.md-typeset code {
  background: var(--cp-surface0) !important;
  color: var(--cp-text) !important;
  border: 1px solid var(--cp-overlay0);
  border-radius: 0.3rem;
  padding: 0.1rem 0.3rem;
  font-family: 'JetBrains Mono', monospace;
}

.md-typeset pre {
  background: var(--cp-surface0) !important;
  border: 1px solid var(--cp-overlay0);
  border-radius: 0.5rem;
}

.md-typeset pre code {
  background: transparent !important;
  border: none;
}

/* Highlight.js overrides */
.hljs {
  background: var(--cp-surface0) !important;
  color: var(--cp-text) !important;
}

.hljs-keyword { color: var(--cp-accent-secondary) !important; }
.hljs-string { color: var(--cp-green) !important; }
.hljs-comment { color: var(--cp-overlay2) !important; font-style: italic; }
.hljs-number { color: var(--cp-peach) !important; }
.hljs-function { color: var(--cp-blue) !important; }
.hljs-variable { color: var(--cp-text) !important; }

/* Admonitions */
.md-typeset .admonition {
  background: var(--cp-surface0);
  border: 1px solid var(--cp-overlay0);
  border-left: 4px solid var(--cp-accent-primary);
  border-radius: 0.5rem;
}

.md-typeset .admonition-title {
  background: var(--cp-surface1);
  color: var(--cp-text);
  font-weight: 600;
}

/* Tables */
.md-typeset table {
  border: 1px solid var(--cp-overlay0);
  background: var(--cp-surface0);
}

.md-typeset table th {
  background: var(--cp-surface1);
  color: var(--cp-text);
  font-weight: 600;
  border-bottom: 2px solid var(--cp-overlay0);
}

.md-typeset table td {
  border-bottom: 1px solid var(--cp-overlay0);
  color: var(--cp-subtext1);
}

/* Links */
.md-typeset a {
  color: var(--cp-accent-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--cp-accent-secondary);
  border-bottom-color: var(--cp-accent-secondary);
}

/* Buttons */
.md-button {
  background: linear-gradient(90deg, var(--cp-accent-secondary), var(--cp-accent-primary));
  color: var(--cp-text) !important;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.md-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140, 170, 238, 0.3);
}

/* Search */
.md-search__form {
  background: transparent !important;
  border-radius: 1rem !important;
}

.md-search__input {
  background: var(--cp-surface0) !important;
  color: var(--cp-text) !important;
  border: 1px solid var(--cp-overlay0);
  border-radius: 1rem !important;
}

.md-search__input::placeholder {
  color: var(--cp-overlay2) !important;
}

.md-search__output {
  background: var(--cp-mantle) !important;
  border: 1px solid var(--cp-overlay0);
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(35, 38, 52, 0.3);
}

/* Search placeholder and results */
.md-search-result {
  background: var(--cp-mantle) !important;
}

.md-search-result__meta {
  background: var(--cp-crust) !important;
  color: var(--cp-overlay2) !important;
}

/* Footer */
.md-footer {
  background: var(--cp-mantle) !important;
  border-top: 1px solid var(--cp-overlay0);
}

.md-footer-meta {
  background: var(--cp-crust) !important;
}

/* Tabs */
.md-tabs {
  background: var(--cp-base) !important;
  border-bottom: none !important;
}

.md-tabs__link {
  color: var(--cp-subtext1) !important;
}

.md-tabs__link:hover {
  color: var(--cp-rosewater) !important;
}

.md-tabs__link--active {
  color: var(--cp-accent-primary) !important;
}

/* TOC */
.md-nav--secondary .md-nav__link--active {
  color: var(--cp-accent-primary) !important;
  border-left: 2px solid var(--cp-accent-primary);
  padding-left: 1rem;
}

/* Hide theme toggle button */
.md-header__option {
  display: none !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cp-surface0);
}

::-webkit-scrollbar-thumb {
  background: var(--cp-overlay0);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cp-overlay1);
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .md-header__title {
    font-size: 1.1rem;
  }
  
  .md-content__inner {
    padding: 1rem 0.5rem;
  }
}