/* Recidiviz Custom Color Palette */
:root {
  /* Base Colors */
  --recidiviz-slate: rgb(53, 83, 98);
  --recidiviz-white: rgb(255, 255, 255);

  /* Marble - backgrounds and knockout elements */
  --recidiviz-marble1: rgb(255, 255, 255);
  --recidiviz-marble2: rgb(249, 250, 250);
  --recidiviz-marble3: rgb(244, 245, 245);
  --recidiviz-marble4: rgb(239, 241, 241);
  --recidiviz-marble5: rgb(233, 237, 237);

  /* Slate - UI elements (text, icons, borders) */
  --recidiviz-slate10: rgba(53, 83, 98, 0.1);
  --recidiviz-slate20: rgba(53, 83, 98, 0.2);
  --recidiviz-slate30: rgba(53, 83, 98, 0.3);
  --recidiviz-slate60: rgba(53, 83, 98, 0.6);
  --recidiviz-slate70: rgba(53, 83, 98, 0.7);
  --recidiviz-slate80: rgba(53, 83, 98, 0.8);
  --recidiviz-slate85: rgba(53, 83, 98, 0.85);

  /* Pine - text and dark backgrounds */
  --recidiviz-pine1: rgb(1, 35, 34);
  --recidiviz-pine2: rgb(0, 51, 49);
  --recidiviz-pine3: rgb(0, 65, 62);
  --recidiviz-pine4: rgb(1, 76, 72);

  /* White variations */
  --recidiviz-white90: rgba(255, 255, 255, 0.9);
  --recidiviz-white80: rgba(255, 255, 255, 0.8);

  /* Signal - alerts, errors, links, tooltips */
  --recidiviz-signal-links: rgb(0, 108, 103);
  --recidiviz-signal-highlight: rgb(37, 184, 148);
  --recidiviz-signal-notification: rgb(35, 124, 175);
  --recidiviz-signal-error: rgb(164, 57, 57);
  --recidiviz-signal-tooltip: rgb(8, 34, 73);
  --recidiviz-signal-selected: rgb(55, 151, 205);

  /* Data visualization colors */
  --recidiviz-data-forest1: rgb(37, 99, 111);
  --recidiviz-data-forest2: rgb(0, 75, 91);
  --recidiviz-data-gold1: rgb(217, 169, 95);
  --recidiviz-data-gold2: rgb(183, 135, 61);
  --recidiviz-data-crimson1: rgb(186, 79, 79);
  --recidiviz-data-crimson2: rgb(164, 57, 57);
  --recidiviz-data-indigo1: rgb(76, 98, 144);
  --recidiviz-data-indigo2: rgb(62, 84, 130);
  --recidiviz-data-teal1: rgb(144, 174, 181);
  --recidiviz-data-teal2: rgb(110, 140, 147);
  --recidiviz-data-salmon1: rgb(204, 152, 156);
  --recidiviz-data-salmon2: rgb(171, 119, 123);

  /* Text colors */
  --recidiviz-text-caption: var(--recidiviz-slate85);
  --recidiviz-text-links: var(--recidiviz-signal-links);
  --recidiviz-text-normal: var(--recidiviz-pine4);
}

/* Material theme color scheme override */
[data-md-color-scheme="recidiviz"] {
  /* Primary colors */
  --md-primary-fg-color: var(--recidiviz-pine3);
  --md-primary-fg-color--light: var(--recidiviz-pine2);
  --md-primary-fg-color--dark: var(--recidiviz-pine4);
  --md-primary-bg-color: var(--recidiviz-white);
  --md-primary-bg-color--light: var(--recidiviz-marble2);

  /* Accent colors */
  --md-accent-fg-color: var(--recidiviz-signal-highlight);
  --md-accent-fg-color--transparent: var(--recidiviz-slate20);
  --md-accent-bg-color: var(--recidiviz-white);
  --md-accent-bg-color--light: var(--recidiviz-marble3);

  /* Text colors */
  --md-typeset-color: var(--recidiviz-text-normal);
  --md-typeset-a-color: var(--recidiviz-text-links);

  /* Background colors */
  --md-default-bg-color: var(--recidiviz-white);
  --md-default-fg-color: var(--recidiviz-pine4);
  --md-default-fg-color--light: var(--recidiviz-slate70);
  --md-default-fg-color--lighter: var(--recidiviz-slate60);
  --md-default-fg-color--lightest: var(--recidiviz-slate30);

  /* Code block colors */
  --md-code-bg-color: var(--recidiviz-marble3);
  --md-code-fg-color: var(--recidiviz-pine4);

  /* Footer colors */
  --md-footer-bg-color: var(--recidiviz-pine1);
  --md-footer-bg-color--dark: var(--recidiviz-pine2);
  --md-footer-fg-color: var(--recidiviz-white90);
  --md-footer-fg-color--light: var(--recidiviz-white80);
  --md-footer-fg-color--lighter: var(--recidiviz-slate30);

  /* Error/warning colors */
  --md-typeset-mark-color: var(--recidiviz-signal-highlight);
  --md-admonition-fg-color: var(--recidiviz-pine4);
  --md-admonition-bg-color: var(--recidiviz-marble2);
}

/* Dark mode color scheme */
[data-md-color-scheme="recidiviz-dark"] {
  /* Primary colors - marble nav in dark mode */
  --md-primary-fg-color: var(--recidiviz-pine3);
  --md-primary-fg-color--light: var(--recidiviz-pine2);
  --md-primary-fg-color--dark: var(--recidiviz-pine4);
  --md-primary-bg-color: var(--recidiviz-marble2);
  --md-primary-bg-color--light: var(--recidiviz-marble3);

  /* Accent colors */
  --md-accent-fg-color: var(--recidiviz-signal-highlight);
  --md-accent-fg-color--transparent: rgba(37, 184, 148, 0.2);
  --md-accent-bg-color: var(--recidiviz-pine2);
  --md-accent-bg-color--light: var(--recidiviz-pine3);

  /* Text colors - light text on dark background */
  --md-typeset-color: var(--recidiviz-marble3);
  --md-typeset-a-color: var(--recidiviz-signal-highlight);

  /* Background colors - dark pine tones */
  --md-default-bg-color: var(--recidiviz-pine1);
  --md-default-fg-color: var(--recidiviz-marble2);
  --md-default-fg-color--light: var(--recidiviz-marble3);
  --md-default-fg-color--lighter: var(--recidiviz-marble4);
  --md-default-fg-color--lightest: var(--recidiviz-marble5);

  /* Code block colors */
  --md-code-bg-color: var(--recidiviz-pine2);
  --md-code-fg-color: var(--recidiviz-marble2);
  --md-code-hl-color: rgba(37, 184, 148, 0.15);

  /* Footer colors */
  --md-footer-bg-color: var(--recidiviz-pine2);
  --md-footer-bg-color--dark: var(--recidiviz-pine1);
  --md-footer-fg-color: var(--recidiviz-marble2);
  --md-footer-fg-color--light: var(--recidiviz-marble3);
  --md-footer-fg-color--lighter: var(--recidiviz-slate60);

  /* Error/warning/info colors */
  --md-typeset-mark-color: rgba(37, 184, 148, 0.3);
  --md-admonition-fg-color: var(--recidiviz-marble2);
  --md-admonition-bg-color: var(--recidiviz-pine2);

  /* Tables */
  --md-typeset-table-color: var(--recidiviz-pine2);

  /* Scrollbar */
  --md-scrollbar-fg-color: var(--recidiviz-slate60);
  --md-scrollbar-bg-color: var(--recidiviz-pine2);

  /* Links and interactive elements */
  --md-typeset-a-color--hover: var(--recidiviz-signal-selected);
}

/* Theme toggle positioning and styling */
/* Move the palette toggle to the right side, outside the search bar */
.md-header__option {
  order: 3;
  margin-left: auto;
}

.md-search {
  order: 2;
}

/* Make the theme toggle icon dimmer than nav text */
.md-header__button.md-icon {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.md-header__button.md-icon:hover {
  opacity: 0.8;
}

/* Search result metadata styling */
[data-md-color-scheme="recidiviz-dark"] .md-search-result__meta {
  color: var(--recidiviz-slate60);
  opacity: 0.8;
}

/* Navigation drawer title styling for mobile/small screens */
[data-md-color-scheme="recidiviz-dark"] .md-nav__title {
  color: var(--recidiviz-marble2);
  background-color: var(--recidiviz-pine2);
}

[data-md-color-scheme="recidiviz-dark"] .md-nav__title[for="__drawer"] {
  background-color: var(--recidiviz-pine1);
}


[data-md-color-scheme="recidiviz-dark"] .md-nav__title {
    color: var(--recidiviz-marble2);
    background-color: var(--recidiviz-pine1);
}