/* Browser Default Fonts Configuration */
:root {
  /* Font families */
  --font-family-headings: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-body: Georgia, 'Times New Roman', Times, serif;
  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  
  /* Colors for our warm palette */
  --warm-bg: #fff4ea;
  --warm-light: #fff9f5;
  --warm-lighter: #fffcfa;
}

/* Base typography */
body {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  font-weight: 600;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Navigation and UI elements use sans-serif */
.nav, .menu, .button, 
.post-meta, .breadcrumbs,
.footer, .header,
.top-link,
.post-title,
.page-header h1,
.post-entry .entry-header h2 {
  font-family: var(--font-family-headings);
}

/* Code blocks */
code, pre, kbd, samp {
  font-family: var(--font-family-code);
}

pre {
  border-radius: 4px;
}

/* Form elements inherit body font */
input, textarea, select, button {
  font-family: inherit;
}

/* Links inherit parent font */
a {
  font-family: inherit;
}

/* Header colors */
.header a {
  color: #555;
}

.dark .header a {
  color: #aaa;
}

/* Article width constraint */
body:has(.post-single) .main {
  max-width: calc(650px + var(--gap) * 2);
}

/* Light mode backgrounds */
body:not(.dark):has(.post-single),
body.list:not(.dark) {
  background-color: var(--warm-bg);
}

body:not(.dark) .post-entry,
body:not(.dark) .share-buttons,
body:not(.dark) code:not(pre code),
body:not(.dark) pre {
  background-color: var(--warm-light);
}

/* Dark mode backgrounds - use theme defaults */
.dark body:has(.post-single),
.dark.list {
  background-color: var(--theme);
}

.dark .post-entry,
.dark .share-buttons {
  background-color: var(--entry);
}

.dark code:not(pre code) {
  background-color: var(--code-bg);
}

.dark pre {
  background-color: var(--code-block-bg);
}

/* Theme toggle positioning */
.theme-toggle-li {
  display: flex;
  align-items: center;
  margin-left: auto;
}

#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}