/* ===========================================================================
   Claude-inspired theme polish for Retype
   ---------------------------------------------------------------------------
   Colors (background, text, accent, links, borders, dark mode) are set in
   retype.yml -> theme. This file adds what theme variables can't:
     1. Anthropic-style type — editorial serif headings, clean sans body
     2. Small accent touches that echo claude.com (rules, code, callouts)
   Keep this lean; let Retype's theme tokens do the heavy lifting.
   =========================================================================== */

:root {
  --claude-clay: #d97757;       /* Anthropic terracotta / accent           */
  --claude-clay-soft: #e9b8a6;  /* tint for borders & subtle fills          */
  --claude-ivory: #f0eee6;      /* warm page background (light mode)        */
  --claude-paper: #faf9f5;      /* slightly lighter surface for code/cards  */
  --claude-ink: #141413;        /* near-black heading ink                   */

  --font-serif: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

/* --- Type system -------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.menu-title,
article header h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Brand/site title in the top bar reads as editorial serif too. */
.brand .title,
header .brand-title {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* --- Accent touches ----------------------------------------------------- */

/* Page H1 gets a short clay underline, like claude.com section heads. */
article > h1:first-of-type {
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--claude-clay);
}

/* Blockquotes / summary callouts: warm clay left rule. */
blockquote {
  border-left: 3px solid var(--claude-clay);
}

/* Inline code + code fences sit on warm paper, not stark gray. */
:not(pre) > code {
  background: rgba(217, 119, 87, 0.10);
  color: #b8552f;
  border-radius: 4px;
}

/* Tables: warm header row to match the ivory surface. */
table thead th {
  background: rgba(217, 119, 87, 0.08);
}

/* Primary buttons / active pagination follow the clay accent
   (Retype derives most of this from base-color; this is a safety net). */
.btn-primary,
.pagination .page-item.active .page-link {
  background-color: var(--claude-clay);
  border-color: var(--claude-clay);
}

/* --- Dark mode overrides ------------------------------------------------ */

html[data-bs-theme="dark"] :not(pre) > code,
html.dark :not(pre) > code {
  background: rgba(224, 133, 106, 0.16);
  color: #f0b59f;
}

html[data-bs-theme="dark"] table thead th,
html.dark table thead th {
  background: rgba(224, 133, 106, 0.12);
}