/* ============================================================
   Design System — Warm editorial, book-like design
   Reference: backend-from-first-principle.vercel.app
   ============================================================ */

/* ── Light Mode ── */
:root {
  --bg-base: #f3ede2;
  --bg-raised: #ebe5d8;
  --bg-card: rgba(0, 0, 0, 0.03);
  --border: #d6cfc2;
  --border-strong: #c0b8a8;
  --text-primary: #211e1a;
  --text-secondary: #5c5549;
  --text-muted: #8a8178;
  --accent: #b8402e;
  --accent-light: #c4503a;
  --accent-2: #8f2f20;
  --accent-sidebar-active-bg: rgba(184, 64, 46, 0.12);

  /* Diagram layer colors */
  --diagram-success: #3d8c40;
  --diagram-success-border: #b8dfbb;
  --diagram-dim-1: #f0d5cd;
  --diagram-dim-2: #e8c4ba;

  /* Nextra variable overrides */
  --nextra-primary-hue: 8deg;
  --nextra-primary-saturation: 60%;
  --nextra-bg: var(--bg-base);
  --nextra-content: var(--text-primary);
  --nextra-muted: var(--text-secondary);
  --nextra-border: var(--border);
  --nextra-link: var(--accent);
  --nextra-selection-bg: var(--accent);
  --nextra-selection-color: #fff;
}

/* ── Dark Mode ── */
html.dark {
  --bg-base: #1a1612;
  --bg-raised: #241f1a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border: #3a342c;
  --border-strong: #4a443c;
  --text-primary: #f3ede2;
  --text-secondary: #b5a99a;
  --text-muted: #7a7064;
  --accent: #c4503a;
  --accent-light: #d4664f;
  --accent-2: #8f2f20;
  --accent-sidebar-active-bg: rgba(196, 80, 58, 0.15);

  /* Diagram layer colors */
  --diagram-success: #5fd97a;
  --diagram-success-border: #2f4a35;
  --diagram-dim-1: #3d1f1a;
  --diagram-dim-2: #2e1613;

  /* Nextra variable overrides */
  --nextra-primary-hue: 8deg;
  --nextra-primary-saturation: 60%;
  --nextra-bg: var(--bg-base);
  --nextra-content: var(--text-primary);
  --nextra-muted: var(--text-secondary);
  --nextra-border: var(--border);
  --nextra-link: var(--accent);
  --nextra-selection-bg: var(--accent);
  --nextra-selection-color: #1a1612;
  --nextra-code-bg: var(--bg-raised);
}

/* ── Global resets ── */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ── Navbar ── */
nav.nx-top-0,
nav[class*="nx-top"] {
  background: rgba(26, 22, 18, 0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border) !important;
}

html:not(.dark) nav.nx-top-0,
html:not(.dark) nav[class*="nx-top"] {
  background: rgba(243, 237, 226, 0.88) !important;
}

/* ── Sidebar ── */
aside[class*="nextra-sidebar"],
div[class*="sidebar"] {
  background: var(--bg-base) !important;
  border-color: var(--border) !important;
}

/* Sidebar active link — tinted bg + left accent bar */
[class*="nx-flex"][aria-current="page"],
aside a[aria-current="page"],
aside li > a.active {
  background: var(--accent-sidebar-active-bg) !important;
  color: var(--accent-light) !important;
  border-left: 3px solid var(--accent);
  padding-left: calc(0.5rem - 3px);
  border-radius: 0 6px 6px 0;
}

/* Sidebar section labels (muted mono) */
nav .nx-mb-4 > div > span,
nav .nx-text-xs.nx-uppercase {
  color: var(--text-muted) !important;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Links ── */
a {
  color: var(--accent);
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent-light);
}

/* ── Headings — Fraunces serif ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* Hero / emphasis italic — warm serif for "first principles" phrases */
em, .nextra-content em {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  color: var(--accent);
  font-style: italic;
}

/* ── Code blocks ── */
pre {
  background: var(--bg-raised) !important;
  border: 1px solid var(--border);
  border-radius: 10px;
}

code {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* Inline code chips */
:not(pre) > code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15em 0.4em;
  font-size: 0.88em;
  color: var(--accent-light);
}

html.dark :not(pre) > code {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--accent-light);
}

/* Code syntax highlighting — warm palette */
pre .token.comment,
pre .token.prolog,
pre .token.doctype,
pre .token.cdata {
  color: var(--text-muted);
}

pre .token.keyword,
pre .token.tag {
  color: #d4664f;
}

pre .token.string,
pre .token.attr-value {
  color: #5fd97a;
}

pre .token.number {
  color: #79b3d4;
}

pre .token.type,
pre .token.class-name {
  color: #dcb45f;
}

pre .token.function {
  color: #c9a2f0;
}

pre .token.punctuation {
  color: var(--text-secondary);
}

pre .token.operator {
  color: var(--accent);
}

/* ── Footer ── */
footer {
  border-color: var(--border) !important;
  color: var(--text-muted);
}

footer a {
  color: var(--text-secondary);
}

/* ── Buttons (via utility classes Nextra uses) ── */
.nx-bg-accent,
button[class*="nx-bg-primary"] {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── Search removal ── */
.nextra-search,
div[class*="nextra-search"] {
  display: none !important;
}

/* ── TOC (table of contents right sidebar) ── */
div[class*="toc"] a,
div[class*="toc"] li {
  color: var(--text-secondary) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

div[class*="toc"] a:hover,
div[class*="toc"] li.active a {
  color: var(--accent-light) !important;
}

/* ── Eyebrow / small-caps labels (mono uppercase) ── */
.nx-text-xs.nx-uppercase,
span[class*="eyebrow"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* ============================================================
   Nextra content overrides
   ============================================================ */

/* Card-like containers (diagram boxes etc.) */
.nextra-content div[class*="border"],
.nextra-content figure {
  border-color: var(--border) !important;
  background: var(--bg-raised);
}

/* Overview page section spacing */
.nextra-content > h2:first-of-type {
  margin-top: 0;
}

/* Table styling */
.nextra-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.nextra-content th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nextra-content td {
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.nextra-content tbody tr:hover td {
  background: var(--bg-card);
}

/* Horizontal dividers */
hr {
  border-color: var(--border);
  margin: 2rem 0;
}

/* Blockquote styling */
.nextra-content blockquote {
  border-left: 4px solid var(--accent);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--bg-raised);
  border-radius: 0 10px 10px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.nextra-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Nextra Search / Command Palette overrides
   ============================================================ */
.nextra-search input,
div[class*="nextra-search"] input {
  background: var(--bg-raised);
  border-color: var(--border);
  color: var(--text-primary);
}

/* ============================================================
   Nextra Page Navigation
   ============================================================ */
nav[class*="nx-flex"][class*="nx-border"] {
  border-color: var(--border) !important;
}

/* ============================================================
   Homepage — override Nextra content styles
   ============================================================ */

/* Hide breadcrumb + page navigation on homepage */
.nextra-content .nextra-breadcrumb {
  display: none !important;
}

.nextra-content > nav:last-of-type,
.nextra-content > div:last-of-type + nav,
.nextra-content > .nx-mb-8 {
  display: none !important;
}

/* Reset Nextra's paragraph styles inside custom homepage sections */
.hero .hero-stats,
.hero .hero-actions,
.hero .hero-description,
.hero .hero-eyebrow,
.stage-cards .stage-card,
.stage-cards .stage-card .stage-card-body,
.community-card,
.community-card .community-card-desc,
.community-card .community-card-btn,
.site-footer .site-footer-quote {
  margin-top: 0;
  line-height: inherit;
}

/* Strip Nextra's injected <p> wrappers inside custom components */
.stage-card p,
.community-card p,
.site-footer p,
.hero p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: inherit;
  font-size: inherit;
}

/* ── Hero ── */
.hero {
  padding: 3.5rem 0 2rem;
  max-width: 100%;
}

.hero-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.hero-title {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
  border-bottom: none;
}

.hero-title em {
  font-size: 1em;
  font-style: italic;
  color: var(--accent);
}

.hero-description {
  max-width: 700px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 1.75rem;
}

/* ── Stats pills ── */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 2rem;
}

.hero-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-decoration: none;
}

/* ── Accent divider ── */
.hero-divider {
  width: 120px;
  height: 2px;
  background: var(--accent);
  margin: 2.5rem 0;
  border-radius: 1px;
}

/* ── Actions / Buttons ── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(196, 80, 58, 0.3);
}

.btn-secondary {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   Stage / Chapter Cards
   ============================================================ */
.stages-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.stages-section h2 {
  margin-top: 1rem;
}

.stage-cards {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.stage-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.stage-card:hover {
  border-color: var(--accent);
  transform: translateX(6px);
  box-shadow: 0 4px 20px rgba(196, 80, 58, 0.08);
  background: rgba(196, 80, 58, 0.04);
  text-decoration: none;
  color: var(--text-primary);
}

html.dark .stage-card:hover {
  box-shadow: 0 4px 20px rgba(196, 80, 58, 0.12);
}

.stage-card-number {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.stage-card-body {
  flex: 1;
  min-width: 0;
}

.stage-card-title {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.stage-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.stage-card-arrow {
  font-size: 1.3rem;
  color: var(--text-muted);
  transition: color 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
}

.stage-card:hover .stage-card-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ============================================================
   Community / Contribution Card
   ============================================================ */
.community-card {
  max-width: 960px;
  margin: 2.5rem auto;
  padding: 1.75rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.community-card-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.community-card-title {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--text-primary);
}

.community-card-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 600px;
}

.community-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.3rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(196, 80, 58, 0.25);
}

.community-card-btn:hover {
  background: var(--accent-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(196, 80, 58, 0.35);
}

/* ============================================================
   Footer Quote
   ============================================================ */
.site-footer {
  max-width: 960px;
  margin: 3rem auto 2rem;
  padding: 0 1.5rem 2rem;
}

.site-footer-divider {
  width: 100%;
  height: 2px;
  background: var(--accent);
  margin-bottom: 2rem;
  border-radius: 1px;
}

.site-footer-quote {
  font-family: 'Fraunces', 'Georgia', ui-serif, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
  .hero {
    padding: 2.5rem 0 1.5rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .stage-card {
    padding: 16px 18px;
    gap: 14px;
  }

  .stage-card-number {
    min-width: 38px;
    height: 38px;
    font-size: 0.8rem;
  }

  .stage-card-title {
    font-size: 1rem;
  }

  .stage-card-desc {
    font-size: 0.85rem;
  }

  .stage-card-arrow {
    display: none;
  }

  .hero-stats {
    gap: 0.5rem;
  }

  .community-card > * {
    padding-left: 1.25rem;
  }

  .community-card-title {
    font-size: 1.2rem;
  }
}