/* =========
   ClearRoute Brand Palette
   =========
   Teal Bright: #00E8AF
   Teal Dark:   #009167
   Mint:        #47D7AC
   Lavender:    #C4A3FF
   Peach:       #FFB78E
   Light Grey:  #F7F7F7
   Navy:        #232836
   ========= */

/* -------- Light scheme -------- */
:root,
[data-md-color-scheme="cr-light"] {
  /* Background — soft light grey */
  --md-default-bg-color:           #F7F7F7;

  /* Text */
  --md-default-fg-color:           #232836;
  --md-default-fg-color--light:    #3a4256;
  --md-default-fg-color--lighter:  #58607a;
  --md-typeset-color:              #232836;

  /* Brand */
  --md-primary-fg-color:           #00E8AF;
  --md-primary-fg-color--light:    #47D7AC;
  --md-primary-fg-color--dark:     #009167;
  --md-accent-fg-color:            #C4A3FF;

  /* Code */
  --md-code-bg-color:              #FFFFFF;
  --md-code-fg-color:              #232836;

  /* Links */
  --md-typeset-a-color:            #009167;
  --md-typeset-mark-color:         #FFB78E55;

  /* Borders */
  --md-default-border-color:       #E0E0E0;

  /* Custom tags */
  --cr-tag-bg:                     #FFFFFF;
  --cr-tag-fg:                     #232836;
}

[data-md-color-scheme="cr-light"] .md-typeset a:hover {
  color: #00E8AF;
  text-decoration-color: #00E8AF;
}

/* -------- Dark scheme -------- */
[data-md-color-scheme="cr-dark"] {
  /* Background */
  --md-default-bg-color:           #1D212D;
  --md-code-bg-color:              #232836;

  /* Pure white readable text */
  --md-default-fg-color:           #FFFFFF;
  --md-default-fg-color--light:    #FFFFFF;
  --md-default-fg-color--lighter:  #FFFFFF;
  --md-typeset-color:              #FFFFFF;

  /* Brand */
  --md-primary-fg-color:           #47D7AC;
  --md-primary-fg-color--light:    #00E8AF;
  --md-primary-fg-color--dark:     #009167;
  --md-accent-fg-color:            #FFB78E;

  /* Links and highlights */
  --md-typeset-a-color:            #00E8AF;
  --md-typeset-mark-color:         #FFB78E55;

  /* Code */
  --md-code-fg-color:              #FFFFFF;

  /* Borders */
  --md-default-border-color:       #343B4C;

  /* Custom tags */
  --cr-tag-bg:                     #2A3040;
  --cr-tag-fg:                     #FFFFFF;
}

/* Ensure all typography in dark mode is white */
[data-md-color-scheme="cr-dark"] body,
[data-md-color-scheme="cr-dark"] .md-typeset,
[data-md-color-scheme="cr-dark"] .md-content,
[data-md-color-scheme="cr-dark"] h1,
[data-md-color-scheme="cr-dark"] h2,
[data-md-color-scheme="cr-dark"] h3,
[data-md-color-scheme="cr-dark"] h4,
[data-md-color-scheme="cr-dark"] h5,
[data-md-color-scheme="cr-dark"] h6,
[data-md-color-scheme="cr-dark"] p,
[data-md-color-scheme="cr-dark"] li,
[data-md-color-scheme="cr-dark"] td,
[data-md-color-scheme="cr-dark"] th,
[data-md-color-scheme="cr-dark"] code,
[data-md-color-scheme="cr-dark"] pre,
[data-md-color-scheme="cr-dark"] strong,
[data-md-color-scheme="cr-dark"] em {
  color: #FFFFFF !important;
}

/* --- Shared components --- */
.cr-tag {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--cr-tag-bg);
  color: var(--cr-tag-fg);
  font-size: .75rem;
  line-height: 1.2;
  border: 1px solid var(--md-default-border-color);
}

/* Buttons */
.md-typeset .md-button--primary {
  background-color: var(--md-primary-fg-color);
  border: none;
  color: #232836;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--md-primary-fg-color--dark);
  color: #FFFFFF;
}
.md-typeset .md-button.cr-accent {
  background-color: var(--md-accent-fg-color);
  color: #232836;
}
.md-typeset .md-button.cr-accent:hover {
  filter: brightness(0.9);
}

/* Admonitions */
.md-typeset .admonition-title,
.md-typeset summary {
  border-left: 0.25rem solid var(--md-primary-fg-color);
}

/* Code blocks */
.md-typeset pre > code {
  box-shadow: inset 0 0 0 1px var(--md-default-border-color);
  border-radius: 8px;
}

/* Tables */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border-color: var(--md-default-border-color);
}