@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800&display=swap');

:root {
  --quadro-black: #0f0f0f;
  --quadro-surface: #1a1a1a;
  --quadro-border: #2a2a2a;
  --quadro-white: #e5e5e5;
  --quadro-gray: #808080;
  --quadro-gray-light: #b8b8b8;
  --quadro-code: #141414;
  --quadro-accent: #ccff00;
  --quadro-accent-dim: #9ec200;

  /* Light mode colors */
  --quadro-light-bg: #fafafa;
  --quadro-light-surface: #ececec;
  --quadro-light-border: #d8d8d8;
  --quadro-light-text: #1a1a1a;
  --quadro-light-text-muted: #5a5a5a;
  --quadro-light-gray: #808080;
  --quadro-light-accent: #527a00;
  --quadro-light-accent-dark: #426300;
}

/* Dark mode (slate) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--quadro-black);
  --md-default-bg-color--light: var(--quadro-surface);
  --md-default-bg-color--lighter: var(--quadro-border);
  --md-default-bg-color--lightest: #3a3a3a;

  --md-default-fg-color: var(--quadro-white);
  --md-default-fg-color--light: var(--quadro-gray-light);
  --md-default-fg-color--lighter: var(--quadro-gray);
  --md-default-fg-color--lightest: #606060;

  --md-primary-fg-color: var(--quadro-accent);
  --md-primary-fg-color--light: var(--quadro-accent);
  --md-primary-fg-color--dark: var(--quadro-accent-dim);

  --md-accent-fg-color: var(--quadro-accent);
  --md-accent-fg-color--transparent: rgba(204, 255, 0, 0.1);

  --md-code-fg-color: var(--quadro-white);
  --md-code-bg-color: var(--quadro-code);
  --md-code-hl-color: rgba(204, 255, 0, 0.1);
  --md-code-hl-keyword-color: var(--quadro-accent);
  --md-code-hl-string-color: var(--quadro-gray-light);
  --md-code-hl-comment-color: var(--quadro-gray);

  --md-typeset-a-color: var(--quadro-accent);

  --md-text-font: 'Satoshi', sans-serif;
  --md-code-font: 'Inconsolata', monospace;
}

/* Typography */
.md-typeset {
  font-weight: 400;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 400;
  color: var(--md-default-fg-color);
}

/* Header */
.md-header {
  background: var(--quadro-black);
  border-bottom: 1px solid var(--quadro-border);
}

.md-header__button,
.md-header .md-icon,
.md-header__button.md-icon svg {
  color: var(--quadro-white) !important;
  fill: var(--quadro-white) !important;
}

.md-header__button:hover {
  color: var(--quadro-accent);
}

/* Tabs */
.md-tabs {
  background: var(--quadro-black);
  border-bottom: 1px solid var(--quadro-border);
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--quadro-white) !important;
  border-bottom-color: var(--quadro-accent) !important;
  background-color: transparent !important;
}

/* Navigation */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--quadro-accent) !important;
  background-color: transparent !important;
}

/* Buttons */
.md-button {
  color: var(--quadro-white) !important;
  background-color: transparent !important;
}

.md-button:hover {
  border-color: var(--quadro-accent);
  color: var(--quadro-accent) !important;
}

.md-button--primary,
.md-button--primary * {
  background: var(--quadro-accent) !important;
  color: var(--quadro-black) !important;
  border-color: var(--quadro-accent) !important;
}

.md-button--primary:hover,
.md-button--primary:hover * {
  background: var(--quadro-accent-dim) !important;
  border-color: var(--quadro-accent-dim) !important;
  color: var(--quadro-black) !important;
}

/* Links */
a {
  color: var(--quadro-accent) !important;
}

a:hover {
  color: var(--quadro-white) !important;
}

/* Code */
.highlight {
  border-left: 2px solid var(--quadro-accent);
}

/* Search */
.md-search__input:focus {
  border-color: var(--quadro-accent);
}

.md-search__icon,
.md-search__icon svg {
  color: var(--quadro-white) !important;
  fill: var(--quadro-white) !important;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Tables */
.md-typeset table:not([class]) th {
  color: var(--quadro-accent);
  border-bottom: 2px solid var(--quadro-accent);
}

/* Light mode (default) */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--quadro-light-bg);
  --md-default-bg-color--light: var(--quadro-light-surface);
  --md-default-bg-color--lighter: var(--quadro-light-border);
  --md-default-bg-color--lightest: var(--quadro-light-border);

  --md-default-fg-color: var(--quadro-light-text);
  --md-default-fg-color--light: var(--quadro-light-text-muted);
  --md-default-fg-color--lighter: var(--quadro-light-text-muted);
  --md-default-fg-color--lightest: var(--quadro-light-gray);

  --md-primary-fg-color: var(--quadro-light-accent);
  --md-primary-fg-color--light: var(--quadro-light-accent);
  --md-primary-fg-color--dark: var(--quadro-light-accent-dark);

  --md-accent-fg-color: var(--quadro-light-accent);
  --md-accent-fg-color--transparent: rgba(158, 194, 0, 0.1);

  --md-code-fg-color: var(--quadro-light-text);
  --md-code-bg-color: var(--quadro-light-surface);
  --md-code-hl-color: rgba(158, 194, 0, 0.1);
  --md-code-hl-keyword-color: var(--quadro-light-accent);
  --md-code-hl-string-color: var(--quadro-light-text-muted);

  --md-typeset-a-color: var(--quadro-light-gray);

  --md-text-font: 'Satoshi', sans-serif;
  --md-code-font: 'Inconsolata', monospace;
}

/* Header */
[data-md-color-scheme="default"] .md-header {
  background: var(--quadro-light-bg);
  border-bottom: 1px solid var(--quadro-light-border);
}

[data-md-color-scheme="default"] .md-header__title {
  color: var(--quadro-light-text);
}

[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header .md-icon,
[data-md-color-scheme="default"] .md-header__button.md-icon svg {
  color: var(--quadro-light-text) !important;
  fill: var(--quadro-light-text) !important;
}

[data-md-color-scheme="default"] .md-header__button:hover {
  color: var(--quadro-light-accent) !important;
  fill: var(--quadro-light-accent) !important;
}

/* Tabs */
[data-md-color-scheme="default"] .md-tabs {
  background: var(--quadro-light-bg);
  border-bottom: 1px solid var(--quadro-light-border);
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--quadro-light-gray);
  opacity: 1 !important;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--quadro-light-accent);
  font-weight: 500;
}

[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link {
  color: var(--quadro-light-text) !important;
  border-bottom-color: var(--quadro-light-accent) !important;
  background-color: transparent !important;
}

/* Links */
[data-md-color-scheme="default"] a {
  color: var(--quadro-light-accent) !important;
}

[data-md-color-scheme="default"] a:hover {
  color: var(--quadro-light-text) !important;
  font-weight: 500;
}

/* Navigation */
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link {
  color: var(--quadro-light-text) !important;
  background-color: transparent !important;
}

/* Search */
[data-md-color-scheme="default"] .md-search__input {
  background-color: var(--quadro-light-surface);
  color: var(--quadro-light-text);
  border: 1px solid var(--quadro-light-border);
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
  color: var(--quadro-light-gray);
}

[data-md-color-scheme="default"] .md-search__input:focus {
  border-color: var(--quadro-light-accent);
  background-color: var(--quadro-white);
}

[data-md-color-scheme="default"] .md-search__icon,
[data-md-color-scheme="default"] .md-search__icon svg {
  color: var(--quadro-light-text) !important;
  fill: var(--quadro-light-text) !important;
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: transparent;
}

[data-md-color-scheme="default"] .md-search__output {
  background-color: var(--quadro-white);
  border: 1px solid var(--quadro-light-border);
}

[data-md-color-scheme="default"] .md-search-result__meta {
  background-color: var(--quadro-light-surface);
  color: var(--quadro-light-text);
}

[data-md-color-scheme="default"] .md-search-result__item {
  border-bottom: 1px solid var(--quadro-light-border);
}

[data-md-color-scheme="default"] .md-search-result__item:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Buttons */
[data-md-color-scheme="default"] .md-button {
  color: var(--quadro-light-gray) !important;
  background-color: transparent !important;
}

[data-md-color-scheme="default"] .md-button:hover {
  border-color: var(--quadro-light-accent);
  color: var(--quadro-light-accent) !important;
  font-weight: 500;
}

[data-md-color-scheme="default"] .md-button--primary,
[data-md-color-scheme="default"] .md-button--primary * {
  background: var(--quadro-light-accent) !important;
  color: var(--quadro-light-text) !important;
  border-color: var(--quadro-light-accent) !important;
}

[data-md-color-scheme="default"] .md-button--primary:hover,
[data-md-color-scheme="default"] .md-button--primary:hover * {
  background: var(--quadro-light-accent-dark) !important;
  border-color: var(--quadro-light-accent-dark) !important;
  color: var(--quadro-light-text) !important;
}

/* Code */
[data-md-color-scheme="default"] .highlight {
  border-left: 2px solid var(--quadro-light-accent);
}

/* Scrollbar */
[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Tables */
[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  color: var(--quadro-light-gray);
  border-bottom: 2px solid var(--quadro-light-accent);
}

/* Logo */
.md-header__button.md-logo {
  padding: 0;
}

.md-header__button.md-logo img {
  width: 30px;
  height: 30px;
}

[data-md-color-scheme="default"] .md-header__button.md-logo img {
  content: url('../assets/logo_light_transparent.svg');
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url('../assets/logo_dark_transparent.svg');
}