/* ============================================================
   wenrange color tokens
   Source-of-truth palette; do not introduce ad-hoc colors here.
   ============================================================ */

:root {
  /* Light surfaces (cream paper) */
  --c-paper:        #f4ede2;
  --c-surface:      #f1ead4;
  --c-surface-2:    #ede5d0;
  --c-surface-card: #fbf6e8;

  /* Light ink */
  --c-ink:          #1a1814;
  --c-ink-2:        #4a463d;
  --c-ink-3:        #8a8474;
  --c-line:         #d6cdb4;
  --c-line-2:       #c2b89a;

  /* Brand */
  --c-accent:       #3b6bd1;
  --c-accent-ink:   #fbf6e8;
  --c-accent-soft:  #c8d6f3;

  /* Up / down */
  --c-up:           #2f8a5b;
  --c-down:         #c14a3a;

  /* Dark counterparts */
  --c-paper-dark:    #15120c;
  --c-surface-dark:  #1d1810;
  --c-ink-dark:      #f1e7d0;
  --c-accent-dark:   #7ea5f0;
  --c-up-dark:       #5fc78a;
  --c-down-dark:     #ef7a6c;
}

/* ============================================================
   Light scheme — map tokens onto Material variables
   ============================================================ */

[data-md-color-scheme="default"] {
  --md-default-bg-color:          var(--c-paper);
  --md-default-bg-color--light:   var(--c-surface);
  --md-default-bg-color--lighter: var(--c-surface-2);
  --md-default-bg-color--lightest: var(--c-surface-card);

  --md-default-fg-color:          var(--c-ink);
  --md-default-fg-color--light:   var(--c-ink-2);
  --md-default-fg-color--lighter: var(--c-ink-3);
  --md-default-fg-color--lightest: var(--c-line);

  --md-primary-fg-color:          var(--c-paper);
  --md-primary-fg-color--light:   var(--c-surface);
  --md-primary-fg-color--dark:    var(--c-surface-2);
  --md-primary-bg-color:          var(--c-ink);
  --md-primary-bg-color--light:   var(--c-ink-2);

  --md-accent-fg-color:           var(--c-accent);
  --md-accent-fg-color--transparent: rgba(59, 107, 209, 0.12);
  --md-accent-bg-color:            var(--c-accent-ink);

  --md-typeset-a-color:            var(--c-accent);
  --md-typeset-mark-color:         var(--c-accent-soft);

  --md-code-bg-color:              var(--c-surface-2);
  --md-code-fg-color:              var(--c-ink);

  --md-footer-bg-color:            var(--c-surface);
  --md-footer-bg-color--dark:      var(--c-surface-2);
  --md-footer-fg-color:            var(--c-ink);
}

/* ============================================================
   Dark scheme — single-token swap, surfaces and ink invert
   ============================================================ */

[data-md-color-scheme="slate"] {
  --md-default-bg-color:          var(--c-paper-dark);
  --md-default-bg-color--light:   var(--c-surface-dark);
  --md-default-bg-color--lighter: #2a2418;
  --md-default-bg-color--lightest: #3a3424;

  --md-default-fg-color:          var(--c-ink-dark);
  --md-default-fg-color--light:   var(--c-line);
  --md-default-fg-color--lighter: var(--c-ink-3);
  --md-default-fg-color--lightest: var(--c-ink-2);

  --md-primary-fg-color:          var(--c-paper-dark);
  --md-primary-fg-color--light:   var(--c-surface-dark);
  --md-primary-fg-color--dark:    var(--c-paper-dark);
  --md-primary-bg-color:          var(--c-ink-dark);
  --md-primary-bg-color--light:   var(--c-line);

  --md-accent-fg-color:           var(--c-accent-dark);
  --md-accent-fg-color--transparent: rgba(126, 165, 240, 0.18);
  --md-accent-bg-color:            var(--c-paper-dark);

  --md-typeset-a-color:            var(--c-accent-dark);
  --md-typeset-mark-color:         rgba(126, 165, 240, 0.35);

  --md-code-bg-color:              var(--c-surface-dark);
  --md-code-fg-color:              var(--c-ink-dark);

  --md-footer-bg-color:            var(--c-surface-dark);
  --md-footer-bg-color--dark:      var(--c-paper-dark);
  --md-footer-fg-color:            var(--c-ink-dark);
}

/* ============================================================
   Logo swap — show the dark-variant artwork in slate scheme
   ============================================================ */

[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__title .md-logo img {
  content: url("../assets/wenrange-logo-dark.png");
}

/* ============================================================
   Header: logo only, no site_name text, at every viewport
   The wen[range] logo carries the brand on its own.
   ============================================================ */

/* Hide the site_name label next to the logo (the first header topic).
   Leaves the second .md-header__topic intact so the page heading
   still slides in on scroll. */
.md-header__title .md-header__topic:first-child {
  display: none;
}

/* Material hides the logo button on narrow viewports by default —
   keep it visible at every width. */
.md-header__button.md-logo {
  display: flex !important;
}

/* Drop the duplicate logo from the mobile navigation drawer header —
   the site_name text underneath is enough; the brand already lives
   in the toolbar. */
.md-nav__title .md-logo {
  display: none;
}