/* grelmicro brand palette: ink chrome, red as a thin accent.
   Swiss-design restraint: the red signals, it doesn't fill the frame. */

:root {
  --grel-red: #e30613;
  --grel-red-dark: #b30410;
  --grel-ink: #0f0f10;
  --grel-paper: #fafaf7;
  --grel-mute: #6b6b6b;
}

/* Light mode: paper background, ink chrome, red accent. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--grel-ink);
  --md-primary-fg-color--light: var(--grel-ink);
  --md-primary-fg-color--dark: #000;
  --md-primary-bg-color: var(--grel-paper);
  --md-primary-bg-color--light: rgba(250, 250, 247, 0.7);

  --md-accent-fg-color: var(--grel-red);
  --md-accent-fg-color--transparent: rgba(227, 6, 19, 0.1);

  --md-typeset-a-color: var(--grel-red);
  --md-default-bg-color: var(--grel-paper);
}

/* Dark mode: ink background, paper chrome, same red accent. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1a1a1c;
  --md-primary-fg-color--light: #1a1a1c;
  --md-primary-fg-color--dark: var(--grel-ink);
  --md-primary-bg-color: var(--grel-paper);
  --md-primary-bg-color--light: rgba(250, 250, 247, 0.7);

  --md-accent-fg-color: var(--grel-red);
  --md-accent-fg-color--transparent: rgba(227, 6, 19, 0.15);

  --md-typeset-a-color: #ff4a55;
  --md-default-bg-color: var(--grel-ink);
  --md-default-bg-color--light: #1a1a1c;
}

/* Thin red accent strip at the very top of the viewport. */
.md-header::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--grel-red);
}

/* Header icon: constrain the favicon tile so it doesn't resample. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: 1.5rem;
}


/* Landing-page wordmark: the repo ships a paper-plated wordmark.svg as
   the universal default (readable on any surface, safe for every
   renderer). On the docs site we can do better: swap for the
   transparent-dark variant in Material's slate scheme, so the plate
   disappears and the mark matches the page. GitHub and PyPI ignore
   CSS and keep the plated default. */
[data-md-color-scheme="default"] img.grel-wordmark {
  content: url("../img/logo/wordmark-transparent.svg");
}

[data-md-color-scheme="slate"] img.grel-wordmark {
  content: url("../img/logo/wordmark-transparent-dark.svg");
}

/* Tabs bar: red underline on the active tab. */
.md-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.md-tabs__link--active {
  box-shadow: inset 0 -2px 0 var(--grel-red);
}

/* Section header on nav / sidebar sections: thin red rule. */
.md-nav__title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0.4rem;
}

/* Tables span the full content width. */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}

/* Prevent inline code identifiers from breaking mid-token inside tables. */
.md-typeset table:not([class]) code {
  white-space: nowrap;
  word-break: keep-all;
}

/* Visually hide the auto-generated h1 only on pages that carry the
   wordmark image (the landing page). The wordmark stands in for the
   title. The h1 stays in the a11y tree for screen readers. Other docs
   pages keep their visible page titles. */
.md-content .md-typeset:has(img.grel-wordmark) > h1:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}