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

@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;
  }
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--flora-text);
  letter-spacing: -0.015em;
}

h1 { letter-spacing: -0.025em; }

a {
  color: var(--flora-blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

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

code, pre { background: var(--flora-mantle); }
hr { border-color: var(--flora-surface0); }

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

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

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

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

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

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

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

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