@import url("https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&display=swap");

:root.light {
  --fg: var(--text); --sidebar-bg: var(--panel);
  --sidebar-fg: var(--text-dim); --sidebar-active: var(--accent-text);
  --links: var(--accent-text); --inline-code-color: var(--accent-text);
  --quote-bg: var(--panel-2); --quote-border: var(--accent);
  --table-border-color: var(--line); --table-header-bg: var(--panel-2);
  --table-alternate-bg: var(--panel); --searchbar-border-color: var(--line);
  --searchbar-bg: var(--panel-2); --searchbar-fg: var(--text);
}

:root.ayu {
  --fg: var(--text); --sidebar-bg: var(--panel);
  --sidebar-fg: var(--text-dim); --sidebar-active: var(--accent-text);
  --links: var(--accent-text);
  --inline-code-color: color-mix(in oklab, var(--accent) 45%, var(--text));
  --quote-bg: var(--panel-2); --quote-border: var(--accent);
  --table-border-color: var(--line); --table-header-bg: var(--panel-2);
  --table-alternate-bg: var(--panel); --searchbar-border-color: var(--line);
  --searchbar-bg: var(--panel-2); --searchbar-fg: var(--text);
}

body { font-family: var(--font-sans); }
code { font-family: var(--font-mono); }
.menu-title { font-weight: 800; letter-spacing: var(--tracking-tight); }
.content main { max-width: 820px; }
.content main h1, .content main h2, .content main h3 { letter-spacing: var(--tracking-tight); }
.content main h1 { font-size: var(--text-3xl); }
.content main code { border: 1px solid var(--line); border-radius: 4px; }
.content main pre code { border: 0; }