/* =====================================================================
   Unified typography for avahbanerjee — Inconsolata
   ---------------------------------------------------------------------
   normal text       -> 300  (light)
   bold text         -> 800  (heavy)
   italic / emphasis -> 400  (normal weight, slanted)
   math text         -> 400  (normal weight)
   Load this AFTER the other stylesheets so it governs the page font.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300..900&display=swap');

:root{
  --font-main: "Inconsolata", "Lucida Console", Monaco, monospace;
  --fw-light: 400;
  --fw-normal: 550;
  --fw-heavy: 800;
  --fs-base: 18px;   /* normal text size (was 15px from W3.CSS, +1) */
}

/* one family across the whole site */
html, body,
h1, h2, h3, h4, h5, h6,
p, ol, ul, li, a, span, div, td, th, caption,
blockquote, figcaption, label, footer,
.w3-bar, button, input, select, textarea {
  font-family: var(--font-main);
}

/* normal text -> light + base size (inherited by all the children above) */
html, body {
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
}

/* Theme color transitions keep the palette swap readable without repainting layout. */
html{
  color-scheme: light;
}

html.dark-mode{
  color-scheme: dark;
}

body,
.bg-soft,
.w3-container,
.w3-content{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

html.dark-mode body{
  background-color: var(--paper);
  color: var(--ink);
}

/* Normalize common hard-coded light-mode accents through dark-mode variables. */
html.dark-mode .bg-soft,
html.dark-mode footer,
html.dark-mode .post,
html.dark-mode .blog-nav{
  background-color: var(--paper) !important;
  color: var(--ink);
}

/* The comment drawer is a surface, not page paper, in both themes. */
html.dark-mode .comment-sidecar{
  background-color: var(--surface) !important;
  color: var(--ink);
}

html.dark-mode .muted,
html.dark-mode .year,
html.dark-mode .comment-date,
html.dark-mode .comment-empty,
html.dark-mode .comment-status,
html.dark-mode .site-copy{
  color: var(--muted) !important;
}

html.dark-mode .site-notice,
html.dark-mode .post-date{
  color: var(--muted-soft) !important;
}

html.dark-mode .divider,
html.dark-mode .sub,
html.dark-mode .nav-head,
html.dark-mode .post-card,
html.dark-mode .comment-head,
html.dark-mode .comment-item,
html.dark-mode .comment-form{
  border-color: var(--rule) !important;
}

/* Form/code surfaces use palette variables in both light and dark modes. */
input,
textarea,
select,
pre{
  background-color: var(--field-bg) !important;
  border-color: var(--field-border) !important;
  color: var(--ink) !important;
}

/* bold text -> heavy */
b, strong, th,
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-heavy);
}

/* italic / emphasis -> normal weight (slant is browser-synthesized;
   Inconsolata ships upright only) */
i, em, cite, dfn, blockquote, address {
  font-weight: var(--fw-normal);
  font-style: italic;
}

/* math text -> normal weight (MathJax 2 output + generic mono hooks) */
.MathJax, .MathJax_Display, .MathJax_Preview, .MathJax_SVG,
.mjx-chtml, mjx-container, .math, .tex,
code, kbd, samp, pre {
  font-weight: var(--fw-normal);
  font-style: normal;
}

/* reading-text sizes derive from --fs-base so the whole site scales from one knob.
   (.lede sits one px above base to keep its intro emphasis.) */
.lede{ font-size: calc(var(--fs-base) + 1px); }
.post-content{ font-size: var(--fs-base); }

/* Let the navbar blend into the configured page/nav tone and use a themed divider. */
.w3-top .w3-bar.w3-white,
.w3-top .w3-bar-block.w3-white {
  background-color: var(--navbar-bg, var(--paper, #FBF8F6)) !important;
}

.w3-top .w3-bar.w3-white {
  border-bottom: 1px solid var(--navbar-separator, var(--accent, #EC4A6F)) !important;
}

/* Keep inactive nav labels readable against both light and dark nav backgrounds. */
.w3-top .w3-bar > a:not(.w3-orange):not([title="Toggle Navigation Menu"]),
.w3-top .w3-bar-block > a:not(.w3-orange){
  color:var(--ink) !important;
}

/* Keep shared navbar hover states on the same paper tone instead of flashing white. */
.w3-top .w3-bar > a.w3-hover-white:hover,
.w3-top .w3-bar-block > a.w3-hover-white:hover {
  background-color: var(--navbar-bg, var(--paper, #FBF8F6)) !important;
}

/* Keep the mobile hamburger button controlled by the shared color palette. */
.w3-top .w3-bar > a[title="Toggle Navigation Menu"],
.w3-top .w3-bar > a[title="Toggle Navigation Menu"]:hover,
.w3-top .w3-bar > a[title="Toggle Navigation Menu"]:focus {
  background-color: var(--navbar-menu-button-bg, var(--navbar-btn, var(--accent, #EC4A6F))) !important;
  color: var(--navbar-menu-button-text, #fff) !important;
}

/* Shared dark-mode toggle injected into the desktop nav and mobile nav pane. */
.theme-toggle{
  border:0;
  background-color:transparent !important;
  color:var(--ink) !important;
  cursor:pointer;
}

.theme-toggle:hover,
.theme-toggle:focus{
  background-color:rgba(var(--accent-rgb),.12) !important;
  color:var(--accent) !important;
  outline:none;
}

.theme-toggle[aria-pressed="true"]{
  color:var(--accent) !important;
}