/*
 * FITIZENS brand palette for the partner docs site.
 * Source of the hexes: fitizens-landing's theme configuration.
 *
 * The brand hexes have no matching entry in Material's built-in named
 * colour list, so `primary`/`accent` are set to the placeholder "custom"
 * in mkdocs.yml (which matches no built-in rule and leaves the design
 * tokens below as the only source of truth) and every token is
 * overridden here, scoped per colour scheme.
 */

[data-md-color-scheme="slate"] {
  --md-default-fg-color: #f6f6f6;
  --md-default-fg-color--light: #cfcfcf;
  --md-default-fg-color--lighter: #999999;
  --md-default-fg-color--lightest: #7d7d7d;
  --md-default-bg-color: #262626;

  --md-primary-fg-color: #333333;
  --md-primary-fg-color--light: #3d3d3d;
  --md-primary-fg-color--dark: #1a1a1a;
  --md-primary-bg-color: #f6f6f6;
  --md-primary-bg-color--light: #f6f6f6b3;

  --md-accent-fg-color: #aac941;
  --md-accent-fg-color--transparent: #aac94126;
  --md-accent-bg-color: #262626;
  --md-accent-bg-color--light: #262626b3;

  --md-typeset-color: var(--md-default-fg-color);
  --md-typeset-a-color: #aac941;

  --md-code-fg-color: #f6f6f6;
  --md-code-bg-color: #333333;
  --md-code-bg-color--light: #333333b3;
  --md-code-bg-color--lighter: #3333334d;

  --md-code-hl-color: #aac941;
  --md-code-hl-color--light: #aac94126;
  --md-code-hl-comment-color: #cfcfcf;
  --md-code-hl-constant-color: #aac941;
  --md-code-hl-function-color: #90c4df;
  --md-code-hl-generic-color: #cfcfcf;
  --md-code-hl-keyword-color: #aac941;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-number-color: #a8c6de;
  --md-code-hl-operator-color: #cfcfcf;
  --md-code-hl-punctuation-color: #cfcfcf;
  --md-code-hl-special-color: #90c4df;
  --md-code-hl-string-color: #90c4df;
  --md-code-hl-variable-color: #cfcfcf;

  --md-typeset-table-color: #5d5d5d80;
  --md-typeset-table-color--light: #5d5d5d40;

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-footer-fg-color: #f6f6f6;
  --md-footer-fg-color--light: #f6f6f6b3;
  --md-footer-fg-color--lighter: #f6f6f673;
  --md-footer-bg-color: #1a1a1a;
  --md-footer-bg-color--dark: #141414;

  --brand-visited-color: #73a5c6;
  --brand-hover-color: #aac941;
}

[data-md-color-scheme="default"] {
  --md-default-fg-color: #262626;
  --md-default-fg-color--light: #5d5d5d;
  --md-default-fg-color--lighter: #7a7a7a;
  --md-default-fg-color--lightest: #888888;
  --md-default-bg-color: #f6f6f6;

  /* The header and footer stay the brand dark regardless of appearance,
     so switching appearance never has to solve contrast for the chrome
     bar too - only the page surface changes. */
  --md-primary-fg-color: #262626;
  --md-primary-fg-color--light: #333333;
  --md-primary-fg-color--dark: #1a1a1a;
  --md-primary-bg-color: #f6f6f6;
  --md-primary-bg-color--light: #f6f6f6b3;

  --md-accent-fg-color: #73a5c6;
  --md-accent-fg-color--transparent: #73a5c626;
  --md-accent-bg-color: #f6f6f6;
  --md-accent-bg-color--light: #f6f6f6b3;

  --md-typeset-color: var(--md-default-fg-color);

  /* Every brand accent (lime, both blues) falls under 4.5:1 as text
     against this near-white surface - measured, not assumed. Only the
     near-black brand text colour clears the bar, so it carries links
     and headings here; the underline rule below is what still marks a
     link as a link when its colour is identical to body text. */
  --md-typeset-a-color: #262626;

  --md-code-fg-color: #262626;
  --md-code-bg-color: #ececec;
  --md-code-bg-color--light: #ececec99;
  --md-code-bg-color--lighter: #ececec4d;

  --md-code-hl-color: #73a5c6;
  --md-code-hl-color--light: #73a5c626;
  --md-code-hl-comment-color: #5d5d5d;
  --md-code-hl-constant-color: #4a5614;
  --md-code-hl-function-color: #2e5b73;
  --md-code-hl-generic-color: #5d5d5d;
  --md-code-hl-keyword-color: #4a5614;
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-number-color: #1f3c4d;
  --md-code-hl-operator-color: #5d5d5d;
  --md-code-hl-punctuation-color: #5d5d5d;
  --md-code-hl-special-color: #2e5b73;
  --md-code-hl-string-color: #2e5b73;
  --md-code-hl-variable-color: #5d5d5d;

  --md-typeset-table-color: #5d5d5d40;
  --md-typeset-table-color--light: #5d5d5d20;

  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-footer-fg-color: #f6f6f6;
  --md-footer-fg-color--light: #f6f6f6b3;
  --md-footer-fg-color--lighter: #f6f6f673;
  --md-footer-bg-color: #262626;
  --md-footer-bg-color--dark: #1a1a1a;

  /* Same reasoning as the link colour above: no accent hue clears the
     bar on this surface, so the visited state is distinguished with the
     border grey instead, which does clear it. */
  --brand-visited-color: #5d5d5d;

  /* --md-accent-fg-color (#73a5c6) is used for non-text decoration in
     this scheme - the tab underline, the focus ring - and reads only
     2.45:1 as text on this surface. Text hover states need their own
     colour that still clears 4.5:1 as text. */
  --brand-hover-color: #5d5d5d;
}

/* Page and section titles carry the same accent as links, in both
   appearances; body copy does not, so the two stay visually distinct
   wherever the accent also clears the text bar. */
.md-typeset h1,
.md-typeset h2 {
  color: var(--md-typeset-a-color);
}

/* In the light appearance, link text and body text are the same colour
   (see --md-typeset-a-color above), so colour alone can't mark a link -
   the underline is the affordance, in both appearances for consistency. */
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-typeset a:visited {
  color: var(--brand-visited-color);
}

/* --md-accent-fg-color drives non-text decoration (the active tab
   underline, focus rings) and is not held to the text contrast bar in
   the light scheme, so hover text uses its own colour that is. */
.md-typeset a:hover,
.md-typeset a:hover code {
  color: var(--brand-hover-color);
}

.headerlink:hover,
.headerlink:focus {
  color: var(--brand-hover-color);
}

/* The footer background (--md-footer-bg-color--dark) is pinned dark in
   both colour schemes, same as the header, so the wordmark only needs
   its white variant - no per-scheme swap. */
/* The last row on the page needs room beneath it so the wordmark and
   copyright do not sit flush against the viewport edge. */
.md-footer-meta__inner {
  padding-bottom: 1.4rem;
}

/* One end of the footer's bottom row, opposite the copyright. The row
   wraps on narrow screens, so the wordmark keeps its own margin rather
   than relying on sitting beside anything. */
.ftz-footer-wordmark {
  align-items: center;
  display: flex;
  margin: 0.4rem 0.2rem;
}

.ftz-footer-wordmark img {
  height: 1.1rem;
  width: auto;
}