/* Docnote brand — Blue Hour / Daybreak.
   Values copied verbatim from core/frontend/src/design-system/tokens/colors.css
   (v2.0). Do not hand-tune: if a value looks wrong, it is wrong in the design
   system and belongs fixed there. */
:root {
  --dn-bh-50:  #EEF3F9; --dn-bh-100: #D4E1EE; --dn-bh-200: #AABFD9;
  --dn-bh-300: #7A9ABF; --dn-bh-400: #4F78A5; --dn-bh-500: #2E5A8A;
  --dn-bh-600: #163F6D; --dn-bh-700: #082C54; --dn-bh-800: #051E3A;
  --dn-bh-900: #031221; --dn-bh-950: #010810;

  --dn-db-50:  #EAF6FE; --dn-db-100: #C7E9FC; --dn-db-200: #90D3F9;
  --dn-db-300: #52BBF4; --dn-db-400: #1B99E8; --dn-db-500: #1280C7;
  --dn-db-600: #0D63A0; --dn-db-700: #094B7A; --dn-db-800: #062E5A;
  --dn-db-900: #031A36;
}

/* Light — header is bh-700, the same navy the product uses for chrome. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--dn-bh-700);
  --md-primary-fg-color--light: var(--dn-bh-600);
  --md-primary-fg-color--dark:  var(--dn-bh-800);
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: var(--dn-bh-200);

  /* db-600, not the db-400 CTA blue: this is link text, and db-400 on white is
     ~3.09:1 — the product accepts that for large button labels, which body copy
     is not. */
  --md-accent-fg-color:         var(--dn-db-600);
  --md-accent-fg-color--transparent: rgba(27,153,232,0.1);

  --md-typeset-a-color:         var(--dn-db-600);
  --md-default-fg-color:        var(--dn-bh-600);
  --md-default-fg-color--light: var(--dn-bh-500);
  --md-default-fg-color--lighter: var(--dn-bh-300);
  --md-default-bg-color:        #FFFFFF;
  --md-code-bg-color:           var(--dn-bh-50);
  --md-code-fg-color:           var(--dn-bh-700);
  --md-footer-bg-color:         var(--dn-bh-800);
  --md-footer-bg-color--dark:   var(--dn-bh-900);
}
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3 { color: var(--dn-bh-700); }

/* Dark — bh-900 ground, db-300 links (the design system's own link-dark). */
[data-md-color-scheme="slate"] {
  --md-hue: 214;
  --md-primary-fg-color:        var(--dn-bh-900);
  --md-primary-fg-color--light: var(--dn-bh-800);
  --md-primary-fg-color--dark:  var(--dn-bh-950);
  --md-primary-bg-color:        #FFFFFF;

  --md-accent-fg-color:         var(--dn-db-300);
  --md-accent-fg-color--transparent: rgba(82,187,244,0.1);

  --md-typeset-a-color:         var(--dn-db-300);
  --md-default-fg-color:        #E6EEF7;
  --md-default-bg-color:        var(--dn-bh-900);
  --md-code-bg-color:           var(--dn-bh-800);
  --md-footer-bg-color:         var(--dn-bh-950);
}

/* Selection uses db-100/bh-700, matching the product. */
::selection { background: var(--dn-db-100); color: var(--dn-bh-700); }

/* The wordmark ships with its own padding; hold it to the header height. */
.md-header__button.md-logo img { height: 1.5rem; width: auto; }