@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Rammetto+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --font-body: "Lato", system-ui, sans-serif;
  --font-title: "Rammetto One", sans-serif;
  --font-serif: "Lora", serif;
  --font-mono: "JetBrains Mono", monospace;
  --bg: #0f0d0b;
  --bg-card-dark: #1e1b17;
  --bg-card-light: #242119;
  --ink: #e6e2dd;
  --ink-soft: #b5b0a5;
  --primary: #93bfba;
  --secondary: #bf9397;
  --border-thin: 1px dashed var(--primary);
  --shadow-vintage: inset 0px 0px 10px 0px rgba(8, 76, 103, 0.3);
}

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 400;
  line-height: 1.75;
}

.post-card, .card, article, .post-list-item {
  background: var(--bg-card-light) !important;
  border: var(--border-thin) !important;
  box-shadow: var(--shadow-vintage) !important;
}

.post-title, .post-title a, h1, h2, h3 {
  color: var(--primary) !important;
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

a {
  color: var(--primary) !important;
  border-bottom: var(--border-thin) !important;
  text-decoration: none;
}

a:hover {
  color: var(--secondary) !important;
}

p, .post-content {
  color: var(--ink-soft) !important;
  font-size: 0.95rem;
}

header, .header, nav {
  background: var(--bg-card-dark) !important;
  border: var(--border-thin) !important;
}

pre, code, .chroma {
  background: var(--bg-card-dark) !important;
  border-left: 2px dotted var(--secondary) !important;
  font-family: var(--font-mono) !important;
}

.tag, .taxonomy {
  background: var(--bg-card-dark) !important;
  border: var(--border-thin) !important;
  color: var(--ink) !important;
}

footer {
  background: var(--bg-card-light) !important;
  border-top: var(--border-thin) !important;
  color: var(--ink-soft) !important;
}

button, .btn {
  background: var(--bg-card-dark) !important;
  border: var(--border-thin) !important;
  color: var(--primary) !important;
}

button:hover {
  background: var(--primary) !important;
  color: var(--bg-card-dark) !important;
}

.prose hr, .divider {
  border: none !important;
  border-top: var(--border-thin) !important;
}

.chroma .k, .chroma .kc, .chroma .kd {
  color: var(--primary) !important;
}

.chroma .s, .chroma .s1, .chroma .s2 {
  color: var(--secondary) !important;
}