@import url("https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap");

@font-face {
  font-display: swap;
  font-family: "Berkeley Mono";
  font-style: normal;
  font-weight: bold;
  src: url("../font/BerkeleyMono-Bold.woff");
}

@font-face {
  font-display: swap;
  font-family: "Berkeley Mono";
  font-style: italic;
  font-weight: bold;
  src: url("../font/BerkeleyMono-BoldItalic.woff");
}

@font-face {
  font-display: swap;
  font-family: "Berkeley Mono";
  font-style: italic;
  font-weight: normal;
  src: url("../font/BerkeleyMono-Italic.woff");
}

@font-face {
  font-display: swap;
  font-family: "Berkeley Mono";
  font-style: normal;
  font-weight: normal;
  src: url("../font/BerkeleyMono-Regular.woff");
}

:root {
  --color-bg: #111315;
  --color-text: #e8eaed;
  --color-link: #9db6ff;
  --color-border-strong: #8b8f98;
  --color-nav-border: #6b7280;
  --color-header-link: #e8eaed;
  --color-toggle-bg: #111315;
  --color-tag-bg: #374151;
  --color-tag-text: #e8eaed;
  --color-kind-bg: #2f3540;
  --color-kind-text: #e8eaed;
}

html[data-theme="light"] {
  --color-bg: #efefef;
  --color-text: #222;
  --color-link: #00e;
  --color-border-strong: #000;
  --color-nav-border: #e5e7eb;
  --color-header-link: #000;
  --color-toggle-bg: #efefef;
  --color-tag-bg: #ffb343;
  --color-tag-text: #222;
  --color-kind-bg: #e5e7eb;
  --color-kind-text: #111;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Recursive", monospace;
  font-variation-settings: "MONO" 1;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

.site-brand {
  color: var(--color-header-link) !important;
}

.theme-toggle {
  background-color: var(--color-toggle-bg);
  color: var(--color-text);
}

.border-black {
  border-color: var(--color-border-strong);
}

.bg-post-tag-badge {
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
}

.bg-post-kind-badge {
  background-color: var(--color-kind-bg);
  color: var(--color-kind-text);
}

html[data-theme="dark"] .x-logo {
  filter: invert(1);
}

.custom-green {
  color: #556b2f;
}

.custom-red {
  color: #850101;
}