/* SahabDrive design tokens, mapped onto Material's variables.
   Same palette the desktop, mobile and web clients use, so the manual reads as
   part of the product rather than as generic Material. */

:root,
[data-md-color-scheme="default"] {
  --sd-ink:          #211A16;
  --sd-ink-soft:     #5C5049;
  --sd-ink-faint:    #8C8078;
  --sd-paper:        #FBF7F3;
  --sd-surface:      #FFFFFF;
  --sd-sunk:         #F3EDE7;
  --sd-border:       #E6DCD3;
  --sd-primary:      #EE6C1F;
  --sd-primary-deep: #C2490D;
  --sd-primary-tint: #FDE8D8;

  --md-default-bg-color:            var(--sd-paper);
  --md-default-fg-color:            var(--sd-ink);
  --md-default-fg-color--light:     var(--sd-ink-soft);
  --md-default-fg-color--lighter:   var(--sd-ink-faint);
  --md-default-fg-color--lightest:  var(--sd-border);

  --md-primary-fg-color:            var(--sd-surface);
  --md-primary-bg-color:            var(--sd-ink);
  --md-primary-bg-color--light:     var(--sd-ink-soft);

  --md-accent-fg-color:             var(--sd-primary-deep);
  --md-typeset-a-color:             var(--sd-primary);
  --md-typeset-mark-color:          var(--sd-primary-tint);

  --md-code-bg-color:               var(--sd-sunk);
  --md-code-fg-color:               var(--sd-ink);

  --md-footer-bg-color:             var(--sd-sunk);
  --md-footer-bg-color--dark:       var(--sd-sunk);
  --md-footer-fg-color:             var(--sd-ink);
  --md-footer-fg-color--light:      var(--sd-ink-soft);
  --md-footer-fg-color--lighter:    var(--sd-ink-faint);
}

[data-md-color-scheme="slate"] {
  --sd-ink:          #F3EDE6;
  --sd-ink-soft:     #B9ADA2;
  --sd-ink-faint:    #8D8177;
  --sd-paper:        #171310;
  --sd-surface:      #211C18;
  --sd-sunk:         #2A231D;
  --sd-border:       #3A3129;
  --sd-primary:      #FF8A4C;
  --sd-primary-deep: #FFAB77;
  --sd-primary-tint: #3A2313;

  --md-default-bg-color:            var(--sd-paper);
  --md-default-fg-color:            var(--sd-ink);
  --md-default-fg-color--light:     var(--sd-ink-soft);
  --md-default-fg-color--lighter:   var(--sd-ink-faint);
  --md-default-fg-color--lightest:  var(--sd-border);

  --md-primary-fg-color:            var(--sd-surface);
  --md-primary-bg-color:            var(--sd-ink);
  --md-primary-bg-color--light:     var(--sd-ink-soft);

  --md-accent-fg-color:             var(--sd-primary-deep);
  --md-typeset-a-color:             var(--sd-primary);
  --md-typeset-mark-color:          var(--sd-primary-tint);

  --md-code-bg-color:               var(--sd-sunk);
  --md-code-fg-color:               var(--sd-ink);

  --md-footer-bg-color:             var(--sd-surface);
  --md-footer-bg-color--dark:       var(--sd-surface);
  --md-footer-fg-color:             var(--sd-ink);
  --md-footer-fg-color--light:      var(--sd-ink-soft);
  --md-footer-fg-color--lighter:    var(--sd-ink-faint);
}

/* A brand hairline under the header - the one place the accent is spent, so the
   page reads as SahabDrive before you have read a word of it. */
.md-header {
  border-bottom: 2px solid var(--sd-primary);
  box-shadow: none;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-header__button.md-logo {
  padding: 0.2rem 0.4rem 0.2rem 0;
}
.md-header__button.md-logo :is(img, svg) {
  width: 1.8rem;
  height: 1.8rem;
}

/* Content sits on the surface, lifted off the paper ground, the way the clients
   stack a panel on their background. */
.md-main__inner {
  margin-top: 1.2rem;
}

.md-typeset h1 {
  color: var(--sd-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--sd-border);
  padding-bottom: 0.25rem;
}
.md-typeset h3 { font-weight: 600; }

.md-nav__title { color: var(--sd-ink-soft); }

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--sd-primary);
}

/* The active page gets a brand rule rather than colour alone, so it is findable
   in a long sidebar without leaning on hue. */
.md-nav--secondary .md-nav__link--active,
.md-sidebar--primary .md-nav__link--active {
  border-left: 2px solid var(--sd-primary);
  padding-left: 0.4rem;
  margin-left: -0.6rem;
}

.md-typeset code {
  background: var(--sd-sunk);
  border: 1px solid var(--sd-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.md-typeset pre > code { border: none; }

.md-typeset table:not([class]) {
  border: 1px solid var(--sd-border);
  border-radius: 6px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--sd-sunk);
  color: var(--sd-ink);
  font-weight: 600;
}

.md-search__form {
  background: var(--sd-sunk);
  border: 1px solid var(--sd-border);
  border-radius: 6px;
}
.md-search__form:hover { background: var(--sd-surface); }

.md-footer-meta { background: transparent; }