/*
 * Project-wide typography and dark mode overrides.
 *
 * Loaded after the Compose theme's compiled styles via params.customCSS in
 * hugo.yaml, so it wins on the cascade without touching the theme submodule.
 */

html {
  --font: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Lora', Georgia, serif;
}

body,
.post,
.post_inner,
.content,
input,
button,
textarea,
select {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

/* Slight readability bump for long-form prose. */
body, html {
  font-size: 14px;
}

.post p,
.post li,
.content p,
.content li {
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Restore list markers inside post bodies. The Compose theme resets
   `ol, ul { list-style: none }` globally and only re-enables markers
   inside `.content`, so markdown bullets in `.post .post_inner` render
   as plain text without this override. */
.post .post_inner ul,
.post .post_inner ol {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.25rem;
}
.post .post_inner ul {
  list-style: disc;
}
.post .post_inner ol {
  list-style: decimal;
}
.post .post_inner ul ul {
  list-style: circle;
}
.post .post_inner ul ul ul {
  list-style: square;
}
.post .post_inner li {
  padding: 0.15rem 0;
}

.post h1, .post h2, .post h3, .post h4, .post h5, .post h6 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Modern dark mode: warmer, lower-contrast surfaces, brighter text,
   distinct accent. Overrides _variables.sass darkmode mixin. */
html[data-mode="dark"],
html[data-mode="auto"] {
  --dark: #15171c;
  --bubble: #1f232b;
}

html[data-mode="dark"] {
  --bg: #15171c;
  --text: #e6e1d6;
  --text-light: #f5f1e8;
  --accent: #1f232b;
  --overlay: #1f232b;
  --border-color: #2a2f3a;
  --code-bg: #1a1d24;
  --theme: #7fb3ff;
  --inline-color: #e3b341;
  --scroll-thumb: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --bg: #15171c;
    --text: #e6e1d6;
    --text-light: #f5f1e8;
    --accent: #1f232b;
    --overlay: #1f232b;
    --border-color: #2a2f3a;
    --code-bg: #1a1d24;
    --theme: #7fb3ff;
    --inline-color: #e3b341;
    --scroll-thumb: rgba(255, 255, 255, 0.08);
  }
}

html[data-mode="dark"] body,
html[data-mode="dark"] .nav_header,
html[data-mode="dark"] .post_meta {
  background-color: var(--bg);
  color: var(--text);
}

html[data-mode="dark"] blockquote {
  background-color: var(--accent);
  color: var(--text);
}

html[data-mode="dark"] code,
html[data-mode="dark"] pre {
  background-color: var(--code-bg);
}

html[data-mode="dark"] a {
  color: var(--theme);
}

html[data-mode="dark"] .post_tag,
html[data-mode="dark"] thead {
  color: #15171c;
}

/*
 * Button color overrides.
 *
 * The Compose theme paints `.button` with --theme (#34c759) on white
 * text — about 2.2:1 contrast, well under WCAG AA. Define dedicated
 * --button-bg / --button-fg tokens so the brand --theme can stay light
 * for accents/links while the filled button uses an AA-safe pairing
 * (~5:1 in light mode, ~12:1 in dark mode).
 */
html {
  --button-bg: #1f7d3b;
  --button-fg: #ffffff;
  --button-bg-hover: #166534;
}
html[data-mode="dark"] {
  --button-bg: #7fb3ff;
  --button-fg: #15171c;
  --button-bg-hover: #a8c8ff;
}
@media (prefers-color-scheme: dark) {
  html[data-mode="auto"] {
    --button-bg: #7fb3ff;
    --button-fg: #15171c;
    --button-bg-hover: #a8c8ff;
  }
}
.button {
  background-color: var(--button-bg);
  color: var(--button-fg);
}
.button:hover {
  background-color: var(--button-bg-hover);
  opacity: 1;
}

/*
 * The `html[data-mode="dark"] a { color: var(--theme) }` rule below
 * has specificity (0,1,2) and would otherwise repaint the button label
 * with --theme — the same color as --button-bg in dark mode, making
 * the text invisible. Match its specificity so the button keeps its
 * own foreground in both explicit dark mode and auto+system-dark.
 */
html[data-mode="dark"] a.button,
html[data-mode="auto"] a.button {
  color: var(--button-fg);
}
html[data-mode="dark"] a.button:hover,
html[data-mode="auto"] a.button:hover {
  color: var(--button-fg);
}
html[data-mode="dark"] a.button.outline,
html[data-mode="auto"] a.button.outline {
  color: var(--text);
}
html[data-mode="dark"] a.button.outline:hover,
html[data-mode="auto"] a.button.outline:hover {
  color: var(--bg);
}

/*
 * Icon-only nav links (e.g. the GitHub menu item).
 *
 * Slightly enlarges the Font Awesome glyph relative to the text-label
 * nav items and keeps it vertically centered with them. Inherits color
 * from the surrounding link so dark-mode and hover states track the
 * theme without extra rules.
 */
.nav-link_icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
}
.nav-link_icon > i {
  color: currentColor;
}

/*
 * Outline button variant.
 *
 * The Compose theme has no `.outline` modifier — without this rule the
 * `outline` class falls through to the filled style. Render it as a
 * true outline: transparent fill, --text-colored label and border, so
 * contrast tracks the body text palette (>14:1 in both modes).
 */
.button.outline,
.button + .button.outline {
  background-color: transparent;
  color: var(--text);
  border: 1.5px solid var(--text);
}
.button.outline:hover {
  background-color: var(--text);
  color: var(--bg);
  opacity: 1;
}