/* ============================================
   Joonbowl — Literary warmth on Archie's bones
   ============================================ */

/* ---- Light theme palette ---- */
:root {
  --color-primary: #7b2d3b;          /* deep wine/burgundy */
  --color-primary-hover: #5e1f2c;
  --color-border: #c4b5a4;           /* warm muted border */
  --color-text: #2c2c2c;             /* rich ink */
  --color-text-muted: #5a5a5a;
  --color-text-meta: #8a7e72;        /* warm grey for dates */
  --color-background: #faf6f1;       /* warm cream */
  --color-background-code: #f0ebe3;  /* parchment */
  --color-background-pre: #f0ebe3;
  --color-background-toc: #f0ebe3;
  --color-background-draft: #f5ece4;
  --color-callout: #7b2d3b;

  /* Dark theme — warm, not cold */
  --color-primary-dark: #d4a0a9;       /* soft rose */
  --color-primary-hover-dark: #e0bcc3;
  --color-border-dark: #5a4a3a;        /* warm brown */
  --color-text-dark: #e8e0d8;          /* warm off-white */
  --color-text-muted-dark: #c4b5a4;
  --color-background-dark: #1a1814;    /* warm near-black */
  --color-background-code-dark: #2a2520;
  --color-background-pre-dark: #2a2520;
  --color-background-toc-dark: #2a2520;
  --color-background-draft-dark: #3a2520;

  /* Spacing tweaks */
  --content-max-width: 720px;
  --font-size-base: 16px;
  --line-height-base: 1.7;
  --line-height-content: 1.7;
}

/* ---- Typography refinements ---- */
html {
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

p {
  line-height: 1.75;
  letter-spacing: 0.005em;
}

/* Headings — keep the # markers but soften them */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 600;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

/* ---- Links — thinner, more refined ---- */
a {
  border-bottom-width: 1.5px;
  border-block-end-width: 1.5px;
  transition: all 0.15s ease;
}

a:hover,
a:focus {
  outline: none;
  border-radius: 2px;
}

/* ---- Header — understated ---- */
header .main {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 1.35rem;
}

nav a {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

/* ---- Blockquotes — classic pull-quote ---- */
blockquote {
  background: var(--color-background-code);
  padding: 0.8rem 1.2rem;
  margin: 1.5rem 0;
  border-radius: 2px;
}

/* ---- Footer — refined ---- */
footer {
  border-block-start-style: solid;
  border-block-start-width: 1px;
  font-size: 0.85rem;
  color: var(--color-text-meta);
}

/* ---- Post list — breathing room ---- */
.list-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.list-item:last-child {
  border-bottom: none;
}

/* ---- Tags — quieter pills ---- */
.tags li::before {
  content: '';
  margin-inline-start: 0;
}

.tags a {
  border-bottom-width: 1.5px;
  border-block-end-width: 1.5px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* ---- Horizontal rules ---- */
hr {
  border-block-start: 1px solid var(--color-border);
  margin-block: 2rem;
}

/* ---- Images — subtle shadow ---- */
img {
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ---- Selection ---- */
::selection {
  background: rgba(123, 45, 59, 0.2);
  color: inherit;
}

::-moz-selection {
  background: rgba(123, 45, 59, 0.2);
  color: inherit;
}

/* ---- Site description / subtitle ---- */
.site-description p {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* ---- Read more link ---- */
.readmore {
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 37.4em) {
  :root {
    --font-size-base: 15px;
  }
}