/* Cyber Revolution Games brand for Material for MkDocs.
 * Same tokens as the studio site: near-black base and the three logo colours
 * (C yellow, R blue, G red). Fonts are self-hosted, no Google Fonts requests. */

@font-face { font-family: "Chakra Petch"; src: url("../assets/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../assets/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --crg-void: #06080c;
  --crg-panel: #0c1016;
  --crg-rule: #1d242d;
  --crg-text: #e9edf2;
  --crg-c: #ffd814;
  --crg-r: #00c8ff;
  --crg-g: #fa1675;
  --md-text-font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --md-code-font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-default-bg-color: var(--crg-void);
  --md-default-fg-color: rgba(233, 237, 242, .9);
  --md-default-fg-color--light: rgba(233, 237, 242, .62);
  --md-default-fg-color--lighter: rgba(233, 237, 242, .36);
  --md-default-fg-color--lightest: rgba(233, 237, 242, .1);
  --md-primary-fg-color: var(--crg-panel);
  --md-primary-fg-color--light: #141a22;
  --md-primary-fg-color--dark: var(--crg-void);
  --md-primary-bg-color: var(--crg-text);
  --md-primary-bg-color--light: rgba(233, 237, 242, .7);
  --md-accent-fg-color: var(--crg-c);
  --md-accent-fg-color--transparent: rgba(255, 216, 20, .1);
  --md-typeset-a-color: #ffe566;
  --md-code-bg-color: var(--crg-panel);
  --md-footer-bg-color: var(--crg-void);
  --md-footer-bg-color--dark: var(--crg-void);
}

/* Header: dark panel with the three logo colours as a thin rule underneath. */
.md-header { box-shadow: none; border-bottom: 1px solid var(--crg-rule); }
.md-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--crg-c) 0 33.33%, var(--crg-r) 33.33% 66.66%, var(--crg-g) 66.66%);
}
.md-header__topic:first-child { font-family: "Chakra Petch", sans-serif; font-weight: 600; letter-spacing: .02em; }
.md-header__button.md-logo img { height: 1.5rem; }
.md-tabs { background: var(--crg-panel); }

/* Legacy banner */
.md-banner { background: #2a2306; color: var(--crg-text); border-bottom: 1px solid rgba(255, 216, 20, .35); }
.md-banner__inner { font-size: .7rem; }
.md-banner a { color: var(--crg-c); text-decoration: underline; text-underline-offset: 2px; }

/* Headings */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Chakra Petch", sans-serif; font-weight: 600; color: var(--crg-text); letter-spacing: -.005em;
}
.md-typeset h1 { font-size: 2.1em; line-height: 1.05; margin-bottom: .8em; }
.md-typeset h2 { border-top: 1px solid var(--crg-rule); padding-top: 1.1em; }
.md-typeset h4 { font-weight: 600; letter-spacing: .01em; }

/* Inline images: slightly cut corner, echoing the logo's chamfer. Scoped to
   .md-typeset so the header logo isn't affected. */
.md-typeset img {
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 8px) 100%, 0 100%);
}

[data-md-color-scheme] .md-typeset blockquote { border-left: 2px solid var(--crg-c); color: var(--md-default-fg-color); }
.md-typeset code { border-radius: 2px; }
.md-typeset table:not([class]) { border: 1px solid var(--crg-rule); border-radius: 0; }
.md-typeset table:not([class]) th { background: var(--crg-panel); }

/* Sidebar: active item marked in the accent colour */
.md-nav__link--active { color: var(--crg-c); }
.md-footer-meta { border-top: 1px solid var(--crg-rule); }