/* AI disclosure: implemented with OpenCode (GLM 5.1), reviewed by me.
   See TRANSPARENCY.md. */
:root {
  --background: #faf6f0;
  --on-background: #2e3230;
  --surface: #faf6f0;
  --on-surface: #2e3230;
  --on-surface-variant: #4a4e4a;
  --primary: #4a7c59;
  --primary-container: #78a886;
  --primary-fixed: #c8e8d0;
  --on-primary: #ffffff;
  --on-primary-fixed: #002110;
  --on-primary-container: #d8f0de;
  --secondary: #6b6358;
  --secondary-container: #f0e8db;
  --on-secondary: #ffffff;
  --on-secondary-container: #5e5548;
  --tertiary: #705c30;
  --tertiary-container: #c4a66a;
  --tertiary-fixed: #f8e0a8;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #554020;
  --on-tertiary-fixed-variant: #554020;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f1ea;
  --surface-container: #f0ece4;
  --surface-container-high: #eae6de;
  --surface-container-highest: #e4e0d8;
  --surface-variant: #e4e0d8;
  --surface-bright: #faf6f0;
  --surface-dim: #dbd7cf;
  --outline: #74796e;
  --outline-variant: #c4c8bc;
  --inverse-surface: #2e3230;
  --inverse-on-surface: #f5f0e8;
  --inverse-primary: #8ecf9e;
  --error: #b83230;
  --error-container: #ffdad8;
  --on-error: #ffffff;
  --on-error-container: #690005;
  --nav-bg: rgba(250, 246, 240, 0.8);
  --nav-border: rgba(74, 124, 89, 0.1);
}

.dark {
  --background: #0b0f0c;
  --on-background: #e4e2dd;
  --surface: #111412;
  --on-surface: #e4e2dd;
  --on-surface-variant: #c4c8bc;
  --primary: #8ecf9e;
  --primary-container: #326342;
  --primary-fixed: #c8e8d0;
  --on-primary: #00391b;
  --on-primary-fixed: #002110;
  --on-primary-container: #c8e8d0;
  --secondary: #d4ccbf;
  --secondary-container: #524b3f;
  --on-secondary: #3a3022;
  --on-secondary-container: #f0e8db;
  --tertiary: #dcc48e;
  --tertiary-container: #554419;
  --on-tertiary: #392e07;
  --on-tertiary-container: #f8e0a8;
  --surface-container-lowest: #0b0f0c;
  --surface-container-low: #191c1a;
  --surface-container: #1d201e;
  --surface-container-high: #282a27;
  --surface-container-highest: #333532;
  --surface-variant: #43483f;
  --surface-bright: #373a37;
  --surface-dim: #111412;
  --outline: #8d9387;
  --outline-variant: #43483f;
  --inverse-surface: #e4e2dd;
  --inverse-on-surface: #2e3230;
  --inverse-primary: #4a7c59;
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error: #690005;
  --on-error-container: #ffdad6;
  --nav-bg: rgba(11, 15, 12, 0.8);
  --nav-border: rgba(67, 72, 63, 0.2);
}

body {
  font-family: 'Nunito Sans', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 { font-family: 'Literata', serif; }

nav, header {
  background-color: var(--nav-bg) !important;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.dot-pattern {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 20px 20px;
}

.filter-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1.5px solid var(--outline-variant);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.filter-checkbox::before {
  content: "check";
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  color: white;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
  font-variation-settings: 'wght' 700;
}
.filter-checkbox:checked::before { transform: scale(1); }

.prose-content h2 {
  font-family: 'Literata', serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--on-background);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.prose-content h3 {
  font-family: 'Literata', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-background);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose-content p { margin-bottom: 1.5rem; }
.prose-content a { color: var(--primary); text-decoration: underline; }
.prose-content code:not(.highlight code) {
  background-color: var(--surface-container);
  color: var(--primary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875em;
}
.prose-content .highlight {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  margin: 2rem 0;
  border-radius: 0.75rem;
  overflow-x: auto;
  border: 1px solid rgba(74, 124, 89, 0.2);
}
.prose-content blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 1.5rem;
  margin-left: 0;
  color: var(--on-surface-variant);
  font-style: italic;
}
.prose-content ul, .prose-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.prose-content li { margin-bottom: 0.5rem; }
.prose-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 2rem auto;
  display: block;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.group:hover .group-hover\:scale-105,
.group:hover .group-hover\:-translate-y-1 { transition: transform 0.3s ease; }