/*
 * Sign color system for the docs site (MkDocs Material).
 *
 * Brand orange #E14603 is the color of the Sign wordmark and of the previous
 * docs site's theme. It marks brand accents: the active tab, focus states,
 * borders and icons. Link text uses a shade of it chosen for contrast:
 * #C23C02 on white (5.3:1) and #F26A2E on the dark background (5.5:1).
 *
 * The "At a glance" boxes reuse the whitepaper's own palette (DESIGN.md:
 * glance background #FDF4EA, title #F7DCC0, frame #D9A066), where orange
 * always marks a Sign component.
 */

/*
 * Typography: San Francisco, Apple's system font. It cannot be served as a
 * web font, so the stack asks for the system UI font: SF Pro and SF Mono on
 * Apple devices, Segoe UI and Cascadia/Consolas on Windows, Roboto on
 * Android and ChromeOS, and the platform's default sans-serif elsewhere.
 */
:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --md-code-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
    "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
body,
input,
.md-typeset {
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
code,
kbd,
pre {
  font-family: var(--md-code-font);
}

:root {
  --sign-orange: #e14603;
  --sign-orange-light: #f26a2e;
  --sign-orange-dark: #c23c02;
  --sign-ink: #1d1d1d;
  --sign-glance-bg: #fdf4ea;
  --sign-glance-title: #f7dcc0;
  --sign-glance-frame: #d9a066;
}

/* Light scheme: white header, as on the previous site in light mode. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #f5f5f5;
  --md-primary-bg-color: var(--sign-ink);
  --md-primary-bg-color--light: rgba(29, 29, 29, 0.7);
  --md-accent-fg-color: var(--sign-orange);
  --md-accent-fg-color--transparent: rgba(225, 70, 3, 0.1);
  --md-default-fg-color: var(--sign-ink);
  --md-typeset-color: var(--sign-ink);
  --md-typeset-a-color: var(--sign-orange-dark);
}

/* Dark scheme: black header over the #1d1d1d page, as on the previous site. */
[data-md-color-scheme="slate"] {
  --md-hue: 0;
  --md-primary-fg-color: #000000;
  --md-primary-fg-color--light: #000000;
  --md-primary-fg-color--dark: #000000;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-default-bg-color: #1d1d1d;
  --md-default-bg-color--light: rgba(29, 29, 29, 0.54);
  --md-code-bg-color: #262626;
  --md-accent-fg-color: var(--sign-orange-light);
  --md-accent-fg-color--transparent: rgba(242, 106, 46, 0.12);
  --md-typeset-a-color: var(--sign-orange-light);
  --sign-glance-bg: rgba(225, 70, 3, 0.08);
  --sign-glance-title: rgba(247, 220, 192, 0.14);
}

/* Header and tabs: a thin orange rule under the bar, orange active tab. */
.md-header {
  border-bottom: 1px solid rgba(127, 127, 127, 0.18);
  box-shadow: none;
}
.md-header__button.md-logo img {
  height: 1.6rem;
}
.md-tabs {
  border-bottom: 1px solid rgba(127, 127, 127, 0.18);
}
.md-tabs__link {
  opacity: 0.75;
  font-weight: 500;
}
.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  opacity: 1;
  color: var(--md-typeset-a-color);
}
.md-tabs__item--active {
  box-shadow: inset 0 -2px 0 var(--sign-orange);
}
/* Search box: a light tint of the header color instead of the theme's
   translucent black, which reads as a gray block on the white header and
   disappears on the black one. */
.md-search__form,
.md-search__button {
  border-radius: 0.4rem;
}
[data-md-color-scheme="default"] .md-search__form,
[data-md-color-scheme="default"] .md-search__button {
  background-color: rgba(29, 29, 29, 0.06);
}
[data-md-color-scheme="default"] .md-search__button:hover {
  background-color: rgba(29, 29, 29, 0.1);
}
[data-md-color-scheme="slate"] .md-search__button {
  background-color: rgba(255, 255, 255, 0.08);
}
[data-md-color-scheme="slate"] .md-search__button:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Sidebar: active page in orange. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-typeset-a-color);
  font-weight: 600;
}

/* Headings in the Sign ink color, a little tighter than the theme default. */
.md-typeset h1 {
  color: var(--sign-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.8em;
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #ffffff;
}
.md-typeset h2,
.md-typeset h3 {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Heading permalinks: the theme draws the mark at the heading's full size,
   which is too large next to bold SF headings. Keep it small and light. */
.md-typeset .headerlink {
  font-size: 0.55em;
  font-weight: 400;
  margin-left: 0.35em;
  vertical-align: middle;
  color: var(--md-default-fg-color--lighter);
}
.md-typeset .headerlink:hover,
.md-typeset .headerlink:focus,
.md-typeset :target > .headerlink {
  color: var(--md-accent-fg-color);
}

/* "At a glance" admonition, from the whitepaper's glance box. */
:root {
  --md-admonition-icon--glance: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6m0 8a5 5 0 1 1 0-10 5 5 0 0 1 0 10m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg>');
}
.md-typeset .admonition.glance,
.md-typeset details.glance {
  border-color: var(--sign-glance-frame);
  background-color: var(--sign-glance-bg);
  box-shadow: none;
}
.md-typeset .glance > .admonition-title,
.md-typeset .glance > summary {
  background-color: var(--sign-glance-title);
}
.md-typeset .glance > .admonition-title::before,
.md-typeset .glance > summary::before {
  background-color: var(--sign-orange);
  -webkit-mask-image: var(--md-admonition-icon--glance);
  mask-image: var(--md-admonition-icon--glance);
}

/* Notes and FAQ entries use the brand orange instead of Material's blue. */
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: var(--sign-orange);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: rgba(225, 70, 3, 0.1);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: var(--sign-orange);
}
.md-typeset .info > summary::after,
.md-typeset .question > summary::after,
.md-typeset .glance > summary::after {
  color: var(--sign-orange);
  background-color: var(--sign-orange);
}

/* Figures. Diagrams come in a light and a dark version (x.svg#only-light,
   x-dark.svg#only-dark, made by tools/dark_svg.py), both on a transparent
   background, so they sit directly on the page. Screenshots and photos get
   rounded corners and a hairline frame. */
.md-typeset figure {
  margin: 1.6em auto;
}
.md-typeset figure img:not([src*=".svg"]) {
  border-radius: 0.4rem;
  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.25);
}
.md-typeset figcaption {
  max-width: 40rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

/* Tables: a light orange header row. */
.md-typeset table:not([class]) th {
  background-color: rgba(225, 70, 3, 0.08);
}

/* Responsive video embeds. */
.video-embed {
  position: relative;
  padding-top: 56.25%;
  margin: 1.2em 0;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.4rem;
}

/* Footer in the header colors. */
.md-footer,
.md-footer-meta {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}
[data-md-color-scheme="default"] .md-footer-meta {
  border-top: 1px solid rgba(127, 127, 127, 0.18);
}
.md-footer-meta__inner,
.md-footer__link {
  color: var(--md-primary-bg-color);
}
.md-footer-meta a:hover,
.md-footer__link:hover {
  color: var(--md-accent-fg-color);
}