/* Custom CSS to match TCG Archivist app theme */
/* App colors: Primary #02FCA2, Background #1F1F21, Surface #232326 */

:root {
  /* Light mode overrides */
  --md-primary-fg-color: #00BFA5;
  --md-primary-fg-color--light: #02FCA2;
  --md-primary-fg-color--dark: #00897B;
  --md-accent-fg-color: #02FCA2;
}

[data-md-color-scheme="slate"] {
  /* Dark mode - match app theme exactly */
  --md-primary-fg-color: #02FCA2;
  --md-primary-fg-color--light: #33FDBA;
  --md-primary-fg-color--dark: #01C882;
  --md-accent-fg-color: #02FCA2;
  
  /* Background colors matching app */
  --md-default-bg-color: #1F1F21;
  --md-default-fg-color: #FFFFFF;
  --md-code-bg-color: #232326;
  --md-code-fg-color: #FFFFFF;
  
  /* Surface colors */
  --md-typeset-a-color: #02FCA2;
  --md-typeset-mark-color: rgba(2, 252, 162, 0.2);
  
  /* Admonition colors with teal accent */
  --md-admonition-fg-color: #FFFFFF;
  --md-admonition-bg-color: rgba(35, 35, 38, 0.8);
}

/* Button styling to match app */
[data-md-color-scheme="slate"] .md-button {
  color: #02FCA2;
  border-color: #02FCA2;
}

[data-md-color-scheme="slate"] .md-button--primary {
  background-color: #02FCA2;
  color: #1F1F21;
  border-color: #02FCA2;
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  background-color: #33FDBA;
  border-color: #33FDBA;
}

/* Navigation and header styling */
[data-md-color-scheme="slate"] .md-header {
  background-color: #232326;
}

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

/* Search box styling */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: #232326;
  border: 1px solid #3A3A3E;
}

[data-md-color-scheme="slate"] .md-search__input:focus {
  border-color: #02FCA2;
}

/* Code blocks */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #232326;
  color: #02FCA2;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background-color: #232326;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #02FCA2;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #33FDBA;
}

/* Table of contents */
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #02FCA2;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #02FCA2;
}

/* Scrollbar styling for dark theme */
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background-color: #3A3A3E;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background-color: #02FCA2;
}