/* ===========================================================================
   Octopodia brand theme for MkDocs Material.

   Palette: deep indigo, cyan, purple, sky.

   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          indigo, large, no accent
     h2  major section       indigo, full-width rule under
     h3  subsection          purple, left bar
     h4  sub-subsection      teal,   thin left bar
     h5  deepest             slate,  small caps, no accent
   =========================================================================== */

:root {
  --octo-indigo: #1e1b4b;
  --octo-cyan:   #06b6d4;
  --octo-purple: #7c3aed;
  --octo-sky:    #38bdf8;

  /* Spacing scale, so heading rhythm is consistent across every page. */
  --octo-space-h2: 2.75rem;
  --octo-space-h3: 2rem;
  --octo-space-h4: 1.5rem;
  --octo-space-h5: 1.25rem;
}

/* ---------------------------------------------------------------- light -- */

[data-md-color-scheme="default"] {
  --octo-h1:      var(--octo-indigo);
  --octo-h2:      var(--octo-indigo);
  --octo-h2-rule: var(--octo-cyan);
  --octo-h3:      #6d28d9;
  --octo-h3-bar:  #a78bfa;
  --octo-h4:      #0e7490;
  --octo-h4-bar:  #67e8f9;
  --octo-h5:      #64748b;

  --octo-th-bg:   #eef2ff;
  --octo-th-fg:   var(--octo-indigo);
  --octo-row-alt: #f8fafc;
  --octo-border:  #e2e8f0;
  --octo-rule:    #e2e8f0;
}

/* ----------------------------------------------------------------- dark -- */
/* Indigo on a dark background is unreadable, so the dark scheme shifts the
   whole ladder to sky, violet and cyan while keeping the same ordering. */

[data-md-color-scheme="slate"] {
  --octo-h1:      #e2e8f0;
  --octo-h2:      var(--octo-sky);
  --octo-h2-rule: var(--octo-cyan);
  --octo-h3:      #c4b5fd;
  --octo-h3-bar:  #8b5cf6;
  --octo-h4:      #67e8f9;
  --octo-h4-bar:  #0e7490;
  --octo-h5:      #94a3b8;

  --octo-th-bg:   rgba(56, 189, 248, 0.10);
  --octo-th-fg:   var(--octo-sky);
  --octo-row-alt: rgba(255, 255, 255, 0.02);
  --octo-border:  rgba(255, 255, 255, 0.12);
  --octo-rule:    rgba(255, 255, 255, 0.12);
}

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

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

.md-typeset h2 {
  color: var(--octo-h2);
  font-weight: 650;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-top: var(--octo-space-h2);
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--octo-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(--octo-h3);
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: var(--octo-space-h3);
  padding-left: 0.7rem;
  border-left: 4px solid var(--octo-h3-bar);
}

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

.md-typeset h5 {
  color: var(--octo-h5);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: var(--octo-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. */

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

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

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

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

.md-typeset blockquote {
  border-left: 3px solid var(--octo-h2-rule);
}

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

.md-typeset code {
  font-size: 0.84em;
}

/* 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;
}