/* Secret Codes brand theme for MkDocs Material.
   Mirrors secretcodes/static/brand/secret-codes.css: cream paper + navy ink,
   maritime signal red and decoded-message gold accents, with the brand's
   Fraunces / Inter / JetBrains Mono type. Fonts are vendored (self-hosted from
   docs/fonts/), not fetched from a third party. */

/* ---- Self-hosted brand fonts (variable woff2, weights 400..700) ---- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-normal-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
}

/* Point Material's font stacks at the vendored families (theme font: false). */
:root {
  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
}

/* ---- Light: cream paper, navy ink ---- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:           #0E1730; /* deep navy ink */
  --md-primary-fg-color--light:    #1B2747;
  --md-primary-fg-color--dark:     #0A1124;
  --md-primary-bg-color:           #F2ECDD; /* cream text on the navy header */
  --md-primary-bg-color--light:    rgba(242, 236, 221, 0.7);

  --md-accent-fg-color:            #D84C2F; /* maritime signal red */

  --md-default-bg-color:           #F2ECDD; /* cream paper */
  --md-default-fg-color:           rgba(14, 23, 48, 0.87);
  --md-default-fg-color--light:    rgba(14, 23, 48, 0.60);
  --md-default-fg-color--lighter:  rgba(14, 23, 48, 0.32);
  --md-default-fg-color--lightest: rgba(14, 23, 48, 0.12);

  --md-typeset-color:    #0E1730;
  --md-typeset-a-color:  #C0432A; /* deepened signal red for link contrast */

  --md-code-bg-color:    #E8DFC6; /* warm paper */
  --md-code-fg-color:    #1B2747;

  --md-footer-bg-color:       #0E1730;
  --md-footer-bg-color--dark: #0A1124;
}

/* ---- Dark: navy ink, cream text ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 226; /* push derived slate surfaces toward navy */

  --md-primary-fg-color:           #1B2747; /* ink-soft header */
  --md-primary-fg-color--light:    #25335A;
  --md-primary-fg-color--dark:     #0A1124;
  --md-primary-bg-color:           #F2ECDD;

  --md-accent-fg-color:            #F0A06B; /* warmer accent on dark */

  --md-default-bg-color:           #0E1730;
  --md-default-fg-color:           rgba(242, 236, 221, 0.90);
  --md-default-fg-color--light:    rgba(242, 236, 221, 0.62);
  --md-default-fg-color--lighter:  rgba(242, 236, 221, 0.32);
  --md-default-fg-color--lightest: rgba(242, 236, 221, 0.12);

  --md-typeset-color:    #F2ECDD;
  --md-typeset-a-color:  #F0A06B;

  --md-code-bg-color:    #1B2747;
  --md-code-fg-color:    #F2ECDD;

  --md-footer-bg-color:       #0A1124;
  --md-footer-bg-color--dark: #070C1A;
}

/* ---- Display type: Fraunces for headings and titles ---- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
  /* Material defaults h1 to --md-default-fg-color--light (~60% ink, greyed).
     Use the full typeset ink so the page title matches the brand. */
  color: var(--md-typeset-color);
}

/* ---- Branded touch: a thin decoded-gold rule under the header ---- */
.md-header {
  border-bottom: 2px solid #C79A3A;
}

/* Accent token consumed by the inline logo + footer SVGs. */
:root {
  --sc-accent: #D84C2F;
}

/* Brand wordmark in the header (top-left, like the main site). The wordmark
   already reads "Secret Codes", so hide Material's redundant text title. */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
}

.md-header__title {
  display: none;
}

/* ---- Branded footer: the morse wordmark, like the app footer ---- */
.sc-doc-footer {
  width: 100%;
}

.sc-doc-footer__link {
  display: inline-block;
  opacity: 0.92;
  transition: opacity 0.2s;
}

.sc-doc-footer__link:hover {
  opacity: 1;
}

.sc-doc-footer__morse {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  color: #F2ECDD; /* cream, on the navy footer */
}

/* Footer links row (by Mariatta + socials), mirroring the app footer. */
.sc-doc-footer__links {
  margin-top: 0.7rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  opacity: 0.85;
}

.sc-doc-footer__links a {
  color: inherit;
  white-space: nowrap;
}

.sc-doc-footer__links a:hover {
  color: var(--sc-accent);
}

.sc-doc-footer__links .sc-doc-footer__sep {
  opacity: 0.4;
  margin: 0 0.45rem;
}