/* Foundations and Flora — Kodama appearance layer */

/* =========================================================
 *  Catppuccin Latte
 *  ========================================================= */

:root {
  --flora-base: #eff1f5;
  --flora-mantle: #e6e9ef;
  --flora-crust: #dce0e8;
  --flora-surface0: #ccd0da;
  --flora-surface1: #bcc0cc;
  --flora-overlay0: #9ca0b0;

  --flora-text: #4c4f69;
  --flora-subtext: #6c6f85;

  --flora-blue: #1e66f5;
  --flora-lavender: #7287fd;
  --flora-mauve: #8839ef;
  --flora-green: #40a02b;
  --flora-red: #d20f39;
  --flora-peach: #fe640b;
  --flora-yellow: #df8e1d;

  /* Purple -> lavender heading progression */
  --flora-h1: #8839ef;
  --flora-h2: #7c63ef;
  --flora-h3: #7287fd;
}


/* =========================================================
 *  Catppuccin Mocha
 *  ========================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --flora-base: #1e1e2e;
    --flora-mantle: #181825;
    --flora-crust: #11111b;
    --flora-surface0: #313244;
    --flora-surface1: #45475a;
    --flora-overlay0: #6c7086;

    --flora-text: #cdd6f4;
    --flora-subtext: #a6adc8;

    --flora-blue: #89b4fa;
    --flora-lavender: #b4befe;
    --flora-mauve: #cba6f7;
    --flora-green: #a6e3a1;
    --flora-red: #f38ba8;
    --flora-peach: #fab387;
    --flora-yellow: #f9e2af;

    /* Purple -> lavender heading progression */
    --flora-h1: #cba6f7;
    --flora-h2: #c0b0f7;
    --flora-h3: #b4befe;
  }
}


/* =========================================================
 *  Page
 *  ========================================================= */

html,
body {
  background: var(--flora-base);
  color: var(--flora-text);
}

body {
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

article {
  font-size: 1.05rem;
}


/* =========================================================
 *  Headings
 *  ========================================================= */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  line-height: 1.2;
}


/* H1 — main title */

article h1 {
  color: var(--flora-h1) !important;

  font-size: 3rem;
  font-weight: 750;
  line-height: 1.08;

  margin-top: 0;
  margin-bottom: 1.8rem;

  letter-spacing: -0.045em;
}


/* H2 — major sections */

article h2 {
  color: var(--flora-h2) !important;

  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;

  margin-top: 3rem;
  margin-bottom: 0.9rem;

  letter-spacing: -0.025em;
}


/* H3 — subsections */

article h3 {
  color: var(--flora-h3) !important;

  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;

  margin-top: 2.4rem;
  margin-bottom: 0.7rem;

  letter-spacing: -0.015em;
}


article h4 {
  color: var(--flora-lavender) !important;

  font-size: 1.15rem;
  font-weight: 650;

  margin-top: 2rem;
  margin-bottom: 0.55rem;

  letter-spacing: -0.01em;
}


article h5,
article h6 {
  color: var(--flora-subtext) !important;

  font-weight: 650;

  margin-top: 1.75rem;
  margin-bottom: 0.5rem;

  letter-spacing: -0.01em;
}


/* =========================================================
 *  Kodama taxon
 *  ========================================================= */

/* Keep things like "Note." subdued */

article h1 .taxon {
  color: var(--flora-subtext) !important;

  font-size: 1.1rem !important;
  font-weight: 500 !important;

  letter-spacing: normal !important;
}

.typst-wrap-left {
  float: left;
  width: max-content;
  margin: 0 1rem 0 0;
}
/* =========================================================
 *  References / Backlinks
 *  ========================================================= */

/* Section heading */

#references > details > summary > header > h1,
#backlinks > details > summary > header > h1 {
color: var(--flora-lavender) !important;

font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;

margin-top: 1.25rem !important;
margin-bottom: 0.5rem !important;

letter-spacing: -0.01em !important;
}


/* Referenced page titles */

#references section h1,
#backlinks section h1 {
color: var(--flora-blue) !important;

font-size: 1.05rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;

margin: 0 !important;

letter-spacing: -0.01em !important;
}


#references,
#backlinks {
color: var(--flora-subtext);
font-size: 0.95rem;
clear: both;
}


/* =========================================================
 *  Links
 *  ========================================================= */

a {
  color: var(--flora-blue);

  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--flora-lavender);
}


/* =========================================================
 *  Code and separators
 *  ========================================================= */

code,
pre {
  background: var(--flora-mantle);
}

hr {
  border-color: var(--flora-surface0);
}


/* =========================================================
 *  Mathematical blocks
 *  ========================================================= */

[data-taxon] {
  border-color: var(--flora-surface0);
}


/* Definitions / axioms */

[data-taxon="definition"],
[data-taxon="axiom"] {
  border-left: 0.22rem solid var(--flora-mauve);
}


/* Results */

[data-taxon="theorem"],
[data-taxon="proposition"],
[data-taxon="lemma"],
[data-taxon="corollary"] {
  border-left: 0.22rem solid var(--flora-blue);
}


/* Examples */

[data-taxon="example"] {
  border-left: 0.22rem solid var(--flora-green);
}


/* Remarks */

[data-taxon="remark"] {
  border-left: 0.22rem solid var(--flora-yellow);
}


/* Proofs */

[data-taxon="proof"] {
  border-left: 0.16rem solid var(--flora-overlay0);
}


/* =========================================================
 *  Footer
 *  ========================================================= */

footer,
.references,
.backlinks {
  color: var(--flora-subtext);
}


/* =========================================================
 *  Selection
 *  ========================================================= */

::selection {
  background: var(--flora-surface1);
  color: var(--flora-text);
}