/* ============================================================
   Retro theme — matches https://retro.atrasisclash.net/
   Palette + fonts lifted from the live site.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Press+Start+2P&display=swap');

:root {
  --retro-bg:        #0e1018;
  --retro-bg2:       #161b2e;
  --retro-panel:     #1c2338;
  --retro-ink:       #f4ecda;
  --retro-soft:      #98a1bd;
  --retro-line:      #2c3454;
  --retro-gold:      #f5c842;
  --retro-gold-deep: #e0a020;
  --retro-gold-shadow:#b07d18;
  --retro-green:     #3ad06a;
  --retro-purple:    #7c5cff;

  --md-text-font: "Plus Jakarta Sans";
  --md-code-font: "JetBrains Mono";
}

/* ---------------- DARK (slate) = the retro look ---------------- */
[data-md-color-scheme="slate"] {
  --md-hue: 230;
  --md-default-bg-color:           #0e1018;
  --md-default-fg-color:           #e7ebf6;
  --md-default-fg-color--light:    #c4cbdd;
  --md-default-fg-color--lighter:  #98a1bd;
  --md-default-fg-color--lightest: rgba(152,161,189,.16);

  --md-primary-fg-color:        #0e1018;
  --md-primary-fg-color--light: #161b2e;
  --md-primary-fg-color--dark:  #0a0c12;
  --md-primary-bg-color:        #e7ebf6;
  --md-primary-bg-color--light: #98a1bd;

  --md-accent-fg-color:         #f5c842;
  --md-accent-fg-color--transparent: rgba(245,200,66,.10);

  --md-typeset-a-color:         #f5c842;
  --md-typeset-mark-color:      rgba(245,200,66,.25);

  --md-code-bg-color:           #11162a;
  --md-code-fg-color:           #dfe6f2;

  --md-footer-bg-color:         #0a0c12;
  --md-footer-bg-color--dark:   #08090f;
}

/* ---------------- LIGHT (default) = retro, lighter ---------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:           #faf5ea;
  --md-default-fg-color:           #1c2338;
  --md-default-fg-color--light:    #3a4566;
  --md-default-fg-color--lighter:  #6b7493;
  --md-default-fg-color--lightest: rgba(28,35,56,.10);

  --md-primary-fg-color:        #161b2e;
  --md-primary-bg-color:        #f4ecda;

  --md-accent-fg-color:         #b07d18;
  --md-typeset-a-color:         #a9781a;

  --md-code-bg-color:           #f1ead8;
  --md-code-fg-color:           #2c3454;
}

/* ---------------- Fonts ---------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-nav__title {
  font-family: "Bricolage Grotesque", var(--md-text-font), sans-serif;
  font-weight: 700;
  letter-spacing: -.012em;
}
.md-typeset h1 { font-weight: 800; letter-spacing: -.022em; }

/* Pixel-font logo in the top bar, vertically centred and left-aligned */
.md-header__title { align-items: center; }
.md-header__title .md-header__topic {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
}
.md-header__title .md-ellipsis {
  font-family: "Press Start 2P", monospace;
  font-size: .58rem;
  line-height: 1;
  color: var(--retro-gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
}
@media screen and (max-width: 30em) {
  .md-header__title .md-ellipsis { font-size: .48rem; }
}

/* Keep the SITE title in the bar at all times — don't swap it for the page /
   section title when scrolling (long pixel-font titles looked bad up there). */
.md-header__topic[data-md-component="header-topic"] { display: none; }
.md-header__title--active .md-header__topic:first-child {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: auto;
}

/* ---------------- Retro grid + gold glow background ---------------- */
[data-md-color-scheme="slate"] .md-main {
  background-color: #0e1018;
  background-image:
    radial-gradient(900px 520px at 80% -6%, rgba(245,200,66,.10), transparent 60%),
    repeating-linear-gradient(0deg,  transparent 0 31px, rgba(255,255,255,.035) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.035) 31px 32px);
  background-attachment: fixed;
}
[data-md-color-scheme="default"] .md-main {
  background-image:
    radial-gradient(900px 520px at 80% -6%, rgba(245,200,66,.16), transparent 60%),
    repeating-linear-gradient(0deg,  transparent 0 31px, rgba(28,35,56,.05) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(28,35,56,.05) 31px 32px);
  background-attachment: fixed;
}

/* ---------------- Header ---------------- */
.md-header {
  border-bottom: 1px solid var(--retro-line);
  box-shadow: none;
}
[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(14,16,24,.86);
  backdrop-filter: blur(8px);
}
.md-header__topic { font-weight: 700; }

/* ---------------- Links ---------------- */
.md-typeset a { text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Buttons (gold CTA, like the retro site) ---------------- */
.md-typeset .md-button {
  border-radius: 10px;
  border-width: 1px;
  border-color: var(--retro-line);
  font-family: "Bricolage Grotesque", var(--md-text-font), sans-serif;
  font-weight: 700;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.md-typeset .md-button:hover { transform: translateY(-1px); text-decoration: none; }
.md-typeset .md-button--primary {
  background: linear-gradient(135deg, var(--retro-gold), var(--retro-gold-deep));
  border-color: var(--retro-gold-deep);
  color: #1b130a;
  box-shadow: 0 2px 0 var(--retro-gold-shadow);
}
.md-typeset .md-button--primary:hover {
  background: linear-gradient(135deg, #ffd866, var(--retro-gold));
  border-color: var(--retro-gold);
  color: #1b130a;
  box-shadow: 0 6px 18px -6px rgba(245,200,66,.5);
}
.md-typeset .md-button--primary .twemoji svg { fill: #1b130a; }

/* ---------------- Cards (grid cards) = retro panels ---------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--retro-line);
  border-radius: 14px;
  background: var(--retro-panel);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="default"] .md-typeset .grid > .card { background: #fffdf6; }
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--retro-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -14px rgba(245,200,66,.40);
}
.md-typeset .grid.cards .twemoji svg { fill: var(--retro-gold); }

/* ---------------- Code ---------------- */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset pre { border: 1px solid var(--retro-line); border-radius: 12px; }
.md-typeset code { border-radius: 6px; }

/* ---------------- Tables ---------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--retro-line);
  border-radius: 10px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--retro-bg2);
  color: var(--retro-ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: #efe7d4; color: #1c2338;
}

/* ---------------- "note" admonition -> gold ---------------- */
.md-typeset .admonition.note,
.md-typeset details.note { border-color: var(--retro-gold); }
.md-typeset .note > .admonition-title,
.md-typeset .note > summary { background-color: rgba(245,200,66,.12); }
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before { background-color: var(--retro-gold); }

/* ---------------- Nav / tabs accents ---------------- */
.md-nav__link--active,
.md-nav__link:focus, .md-nav__link:hover { color: var(--retro-gold); }
.md-nav__item--active > .md-nav__link { color: var(--retro-gold); }

/* ---------------- Mermaid diagrams = framed, centred panels ---------------- */
.md-typeset .mermaid {
  background: var(--retro-panel);
  border: 1px solid var(--retro-line);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.md-typeset .mermaid > svg { display: block; margin: 0 auto; }
[data-md-color-scheme="default"] .md-typeset .mermaid { background: #fffdf6; }

/* ---------------- Figure captions (italic line under images) ---------------- */
.md-typeset p > img + em,
.md-typeset img + em { color: var(--retro-soft); font-size: .82em; }

/* ---------------- Selection ---------------- */
::selection { background: rgba(245,200,66,.30); color: #fff; }