/* Tilt Warp is only used for the header wordmark, matching the marketing site. */
@import url("https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap");

/* Palette from the Cinefin UI spec: blue-black shell with an amber accent.
   The header follows the scheme (light shell / dark shell) like the
   marketing-site navbar, rather than staying dark in both modes. */

:root {
  --md-accent-fg-color: #e8b93b;
  --md-accent-fg-color--transparent: rgba(232, 185, 59, 0.1);
}

/* Amber needs to darken in light mode to stay readable on white. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #e3e6ee;
  --md-primary-fg-color--light: #eff1f6;
  --md-primary-fg-color--dark: #d5dae6;
  --md-primary-bg-color: #1c2230;
  --md-primary-bg-color--light: rgba(28, 34, 48, 0.7);
  --md-typeset-a-color: #a67c14;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #05060a;
  --md-primary-fg-color--light: #222939;
  --md-primary-fg-color--dark: #05060a;
  --md-typeset-a-color: #e8b93b;
  --md-default-bg-color: #0e111a;
  --md-default-bg-color--light: #161b28;
  --md-code-bg-color: #141927;
  --md-footer-bg-color: #0b0d14;
  --md-footer-bg-color--dark: #05060a;
}

/* Wordmark face and mark size to match the marketing-site navbar. */
.md-header__topic:first-child {
  font-family: "Tilt Warp", sans-serif;
  font-weight: 400;
}

/* The mark is a PNG, one per scheme — the header shell inverts light/dark, so
   swap the black gate for its near-white counterpart on the dark scheme. */
.md-header__button.md-logo .cinefin-logo {
  height: 28px;
  width: auto;
  display: block;
}
.md-header__button.md-logo .cinefin-logo--dark {
  display: none;
}
[data-md-color-scheme="slate"] .md-header__button.md-logo .cinefin-logo--light {
  display: none;
}
[data-md-color-scheme="slate"] .md-header__button.md-logo .cinefin-logo--dark {
  display: block;
}

/* Pull the wordmark in next to the mark (Material defaults to a 1rem gap;
   the marketing navbar sits them ~11px apart). */
.md-header .md-header__title {
  margin-left: 0.2rem;
}

/* Gold keyline on hover so the card grid reads as clickable. */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--md-accent-fg-color);
}

/* Screenshots: rounded, framed, and captioned so they read as UI captures
   rather than inline art. */
.md-typeset figure img,
.md-typeset img.screenshot {
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  max-width: 100%;
}

.md-typeset figcaption {
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  margin-top: 0.4rem;
}