/* ===========================================================================
   Auto Warz theme for MkDocs Material.

   Palette is the nine colours locked in Canonical Design Facts section 6.
   Nothing outside that list appears here.

   Dark only. Accent Orange is 2.2:1 on white and Emissive Cyan 1.9:1, both
   far below AA, so a light scheme would require inventing colours the
   canonical page exists to prevent.

   Heading system: every level has its own colour AND its own accent shape,
   so nesting is visible at a glance rather than inferred from size alone.

     h1  page title       panel base, large, no accent
     h2  major section    emissive cyan, full-width rule under
     h3  subsection       accent orange, left bar
     h4  sub-subsection   status amber, thin left bar
     h5  deepest          panel shadow, small caps, no accent
   =========================================================================== */

:root {
  /* Canonical Design Facts section 6 — the whole palette. */
  --aw-panel-base:     #EBEDEC;
  --aw-panel-mid:      #CECAC6;
  --aw-panel-shadow:   #A4A19D;
  --aw-structure:      #807F7E;
  --aw-frame-dark:     #535E60;
  --aw-recess:         #2A3132;
  --aw-void:           #0B0B0E;
  --aw-accent-orange:  #EC983A;
  --aw-emissive-cyan:  #2ED9E8;

  /* Status colours, same semantics as the game's base ring. */
  --aw-amber:    #F5A623;
  --aw-red:      #E8433A;
  --aw-disabled: #5A6A72;

  /* Heading rhythm. */
  --aw-space-h2: 2.75rem;
  --aw-space-h3: 2rem;
  --aw-space-h4: 1.5rem;
  --aw-space-h5: 1.25rem;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:        var(--aw-void);
  --md-default-fg-color:        var(--aw-panel-base);
  --md-default-fg-color--light: var(--aw-panel-shadow);
  --md-typeset-color:           var(--aw-panel-base);
  --md-typeset-a-color:         var(--aw-emissive-cyan);   /* 10.5:1 on panel */
  --md-accent-fg-color:         var(--aw-accent-orange);
  --md-code-bg-color:           #14161C;
  --md-code-fg-color:           var(--aw-panel-mid);

  --aw-h1:      var(--aw-panel-base);
  --aw-h2:      var(--aw-emissive-cyan);
  --aw-h2-rule: var(--aw-frame-dark);
  --aw-h3:      var(--aw-accent-orange);
  --aw-h3-bar:  #8A5416;
  --aw-h4:      var(--aw-amber);
  --aw-h4-bar:  var(--aw-frame-dark);
  --aw-h5:      var(--aw-panel-shadow);

  --aw-th-bg:   rgba(46, 217, 232, 0.08);
  --aw-th-fg:   var(--aw-emissive-cyan);
  --aw-row-alt: rgba(255, 255, 255, 0.02);
  --aw-border:  rgba(235, 237, 236, 0.12);
  --aw-rule:    rgba(235, 237, 236, 0.12);
}

/* -------------------------------------------------------------- headings -- */

.md-typeset h1 {
  color: var(--aw-h1);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.md-typeset h2 {
  color: var(--aw-h2);
  font-weight: 650;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-top: var(--aw-space-h2);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--aw-h2-rule);
}

/* Left bar rather than an underline, so a subsection reads as nested inside
   the section above rather than as a peer of it. */
.md-typeset h3 {
  color: var(--aw-h3);
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: var(--aw-space-h3);
  padding-left: 0.7rem;
  border-left: 4px solid var(--aw-h3-bar);
}

.md-typeset h4 {
  color: var(--aw-h4);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--aw-space-h4);
  padding-left: 0.7rem;
  border-left: 2px solid var(--aw-h4-bar);
}

.md-typeset h5 {
  color: var(--aw-h5);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: var(--aw-space-h5);
}

/* Numbered headings read better with the number set apart. */
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tables -- */
/* Most of these documents are tables, so the header row doing some work is
   what breaks up the page. The register in particular is very wide. */

.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background: var(--aw-th-bg);
  color: var(--aw-th-fg);
  font-weight: 650;
  border-bottom: 2px solid var(--aw-frame-dark);
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background: var(--aw-row-alt);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--aw-border);
  vertical-align: top;
}

/* ------------------------------------------------------------ small bits -- */

.md-typeset blockquote {
  border-left: 3px solid var(--aw-accent-orange);
}

.md-typeset hr {
  border-bottom-color: var(--aw-rule);
  margin: 2.5rem 0;
}

.md-typeset code {
  font-size: 0.84em;
  color: var(--aw-emissive-cyan);
}

/* Mermaid diagrams sit in a lot of white space by default. */
.md-typeset .mermaid {
  margin: 1.75rem 0;
}

/* Tighten list spacing: these pages are dense and the default is airy. */
.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: 0.3rem;
}

/* Focus rings. Cyan is the only palette colour with enough contrast on the
   void background to serve as a visible indicator. */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible {
  outline: 3px solid var(--aw-emissive-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}