/* =========================================================
   AURORA MINIMAL — clean, high-contrast, readable
   Fixes: dark-mode header contrast, heading legibility, rhythm
   ========================================================= */

/* ---------- Palette & scales ---------- */
:root {
  /* Light */
  --bg:            #f8fafc;   /* page background */
  --surface:       #ffffff;   /* cards / header / footer */
  --fg:            #0b1220;   /* primary text */
  --muted:         #586174;   /* secondary text */
  --line:          rgba(2, 6, 23, 0.10);
  --accent:        #2563eb;   /* blue */
  --accent-ink:    #1e40af;

  /* Dark */
  --bg-dark:       #0b1220;   /* page background */
  --surface-dark:  #0e1729;   /* header/footer surface */
  --fg-dark:       #e6e8ed;   /* primary text */
  --muted-dark:    #a6b0c2;   /* secondary text (accessible) */
  --line-dark:     rgba(230, 236, 255, 0.16);
  --accent-dark:   #60a5fa;
  --accent-ink-d:  #93c5fd;

  /* Typography */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Type scale */
  --fs-base: 17.5px;
  --fs-nav:  15.5px;
  --fs-h1:   clamp(28px, 3.4vw, 40px);
  --fs-h2:   clamp(22px, 2.4vw, 28px);
  --fs-h3:   19px;

  /* Layout & rhythm */
  --maxw:     760px;     /* px fallback for containers */
  --measure:  68ch;      /* reading width */
  --lh:       1.7;
  --lh-tight: 1.25;

  --r-1: 6px;  --r-2: 10px; --r-3: 16px; --r-4: 24px;
  --r-5: 36px; --r-6: 56px;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --shadow-strong: 0 12px 30px rgba(0,0,0,0.14);
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-decoration-thickness: .08em;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-ink); text-decoration: underline; }

.container {
  max-width: calc(var(--maxw) + 2 * 24px);
  margin: 0 auto;
  padding: 0 24px;
}

main { padding: var(--r-6) 0 var(--r-6); }

/* ---------- Header (high contrast in dark mode) ---------- */
.mb-site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(6px);
}
.mb-site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}
.mb-site-header .brand {
  font-weight: 650; font-size: 1rem; letter-spacing: -0.01em;
  color: var(--fg);
}
.mb-site-header .brand:hover { opacity: .85; }

.mb-site-header nav a {
  font-size: var(--fs-nav); color: var(--muted); font-weight: 500;
}
.mb-site-header nav a:hover { color: var(--fg); text-decoration: underline; }
.mb-site-header nav a + a { margin-left: 18px; }

/* ---------- Footer ---------- */
.mb-site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--r-6);
  background: var(--surface);
}
.mb-site-footer .container {
  padding: var(--r-4) 24px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- Home hero (optional) ---------- */
.home-hero { padding: 0 24px var(--r-4); }
.home-hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--r-2);
}
.home-hero .lede {
  color: var(--muted);
  max-width: var(--measure);
  margin: 0;
}

/* ---------- Headings & text rhythm ---------- */
/* Replace the old heading color rule with this */
h1, h2, h3, h4 {
  color: inherit;
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--r-3);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-top: var(--r-5); margin-bottom: var(--r-2); }
h3 { font-size: var(--fs-h3); margin-top: var(--r-3); }

p { margin: 0 0 1.1rem; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.6rem 0;
}

/* ---------- Lists ---------- */
ul, ol { margin: 0 0 var(--r-3); padding-left: 1.2rem; }
li + li { margin-top: 0.35rem; }

/* ---------- Post list ---------- */
.post-list { margin: var(--r-4) 0 var(--r-6); padding: 0; list-style: none; }
.post-item { padding: var(--r-4) 0; border-bottom: 1px solid var(--line); }
.post-item:last-child { border-bottom: 0; }
.post-item a { color: inherit; display: block; }
.post-item h3 { margin: 0 0 var(--r-1); font-weight: 600; }
.post-item .meta { color: var(--muted); font-size: .92rem; margin: 0 0 var(--r-2); }
.post-item .summary { color: var(--muted); font-size: .96rem; margin-top: 4px; }

/* ---------- Article / Page ---------- */
.article { padding: var(--r-5) 24px var(--r-6); }
.article-header h1,
article h1:first-child {
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.article-header .meta { color: var(--muted); margin: 0 0 var(--r-4); }

.article-body, .page-body, main article {
  max-width: var(--measure);
}
.article-body p, .page-body p { margin: 0 0 1.1rem; }
.article-body h2, .page-body h2 { margin-top: var(--r-5); }

/* Blockquotes */
.article-body blockquote, .page-body blockquote {
  margin: var(--r-4) 0;
  padding: var(--r-3) var(--r-4);
  border-left: 3px solid var(--line);
  background: rgba(2, 6, 23, 0.03);
  color: var(--muted);
  border-radius: 12px;
}

/* Code */
.article-body code, .page-body code {
  font-family: var(--code);
  font-size: .95em;
  background: rgba(12,18,28,0.05);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}
.article-body pre, .page-body pre {
  font-family: var(--code);
  padding: var(--r-3);
  border-radius: 12px;
  background: #0b1220;
  color: #e2e8f0;
  overflow: auto;
  box-shadow: var(--shadow);
}

/* Images */
.article-body img, .page-body img {
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 100%;
  height: auto;
  margin: var(--r-4) 0;
}

/* Tables */
.article-body table, .page-body table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--r-3) 0;
  font-size: 0.98rem;
}
.article-body th, .article-body td,
.page-body th, .page-body td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 10px 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  :root { --maxw: 92vw; }
  main { padding: var(--r-5) 0 var(--r-5); }
  .article { padding: var(--r-4) 16px var(--r-5); }
}

/* ---------- Dark Mode (system) ---------- */
@media (prefers-color-scheme: dark) {
  body { background: var(--bg-dark); color: var(--fg-dark); }
  .mb-site-header {
    background: var(--surface-dark);           /* solid, not translucent */
    border-bottom-color: var(--line-dark);
    box-shadow: 0 1px 0 var(--line-dark);
    backdrop-filter: none;                     /* avoid blending issues */
  }
  .mb-site-header .brand { color: var(--fg-dark); }
  .mb-site-header nav a { color: var(--muted-dark); }
  .mb-site-header nav a:hover { color: var(--fg-dark); }

  .mb-site-footer {
    background: var(--surface-dark);
    border-top-color: var(--line-dark);
    color: var(--muted-dark);
  }

  a { color: var(--accent-dark); }
  a:hover { color: var(--accent-ink-d); }

  .post-item, hr { border-color: var(--line-dark); }

  .article-body blockquote, .page-body blockquote {
    background: rgba(230, 236, 255, 0.05);
    border-left-color: var(--line-dark);
    color: var(--muted-dark);
  }

  .article-body pre, .page-body pre {
    background: #0f172a;
    color: #e5e7eb;
    box-shadow: var(--shadow-strong);
  }
}

/* ---------- Manual dark toggle (optional) ---------- */
/* Add class="theme-dark" to <html> or <body> to force dark mode */
.theme-dark, .theme-dark body {
  background: var(--bg-dark) !important;
  color: var(--fg-dark) !important;
}
.theme-dark .mb-site-header {
  background: var(--surface-dark) !important;
  border-bottom-color: var(--line-dark) !important;
  box-shadow: 0 1px 0 var(--line-dark) !important;
}
.theme-dark .mb-site-header .brand { color: var(--fg-dark) !important; }
.theme-dark .mb-site-header nav a { color: var(--muted-dark) !important; }
.theme-dark .mb-site-header nav a:hover { color: var(--fg-dark) !important; }
.theme-dark .mb-site-footer {
  background: var(--surface-dark) !important;
  border-top-color: var(--line-dark) !important;
  color: var(--muted-dark) !important;
}
.theme-dark a { color: var(--accent-dark) !important; }
.theme-dark a:hover { color: var(--accent-ink-d) !important; }
.theme-dark .post-item, .theme-dark hr { border-color: var(--line-dark) !important; }
.theme-dark .article-body blockquote,
.theme-dark .page-body blockquote {
  background: rgba(230, 236, 255, 0.05) !important;
  border-left-color: var(--line-dark) !important;
  color: var(--muted-dark) !important;
}
.theme-dark .article-body pre, .theme-dark .page-body pre {
  background: #0f172a !important;
  color: #e5e7eb !important;
  box-shadow: var(--shadow-strong) !important;
}

/* Ensure header brand/nav are readable in both modes */
.mb-site-header .brand { color: inherit; }
.mb-site-header nav a  { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .mb-site-header nav a { color: var(--muted-dark); }
}

/* Make blockquote text inherit as well to avoid low contrast */
.article-body blockquote, .page-body blockquote { color: inherit; }
@media (prefers-color-scheme: dark) {
  .article-body blockquote, .page-body blockquote { color: var(--muted-dark); }
}

/* =========================================================
   FORCE LIGHT MODE — ignore system dark mode
   ========================================================= */
   html, body {
    background: var(--bg) !important;
    color: var(--fg) !important;
  }
  
  .mb-site-header,
  .mb-site-footer {
    background: var(--surface) !important;
    border-color: var(--line) !important;
  }
  
  h1, h2, h3, h4,
  .mb-site-header .brand,
  .mb-site-header nav a {
    color: var(--fg) !important;
  }
  
  a {
    color: var(--accent) !important;
  }
  
  .article-body pre,
  .page-body pre {
    background: #0b1220 !important;   /* keep dark code blocks */
    color: #e2e8f0 !important;
  }
  
  .article-body blockquote,
  .page-body blockquote {
    background: rgba(2, 6, 23, 0.03) !important;
    border-left-color: var(--line) !important;
    color: var(--muted) !important;
  }