/* Site-level additions to the Cosmos theme. Hexo loads this after the theme's
   stylesheet and after the palette block the theme builds from _config.cosmos.yml,
   so plain :root rules here take effect without extra specificity. */

/* ---------------------------------------------------------- typography ---- */
/* The theme tightens headings with negative letter-spacing, which suits the
   Latin display faces. Chinese glyphs are full-width and start touching at that
   tracking, so headings go back to normal spacing. */
h1, h2, h3,
.brand-title, .brand-title > em,
.hero h1, .hero h1 > em,
.margin-paper h2,
.section-margin h2,
.entry-featured h3,
.profile-name,
.article-heading h1,
.prose h2,
.prose .education-timeline h3,
.entry-pagination strong {
  letter-spacing: normal;
}

/* The cover sits in a <picture> so the browser can pick the light or the dark
   artwork; without this the wrapper lays out inline and leaves a gap under it. */
.hero-illustration picture { display: block; }

/* Chinese has no italic. Asked for one, the browser shears the upright glyphs
   sideways, which reads as a printing fault rather than emphasis. Turning off
   style synthesis leaves Latin italic alone, because Petrona ships a real
   italic face, and lets Chinese stand upright. Emphasis still reads, since the
   theme also switches emphasised text to the serif family, which contrasts
   plainly against the rounded body face. Weight synthesis stays on. */
body { font-synthesis: weight; }

/* ---------------------------------------------------------- code ---------- */
/* The theme names its monospace stack inline in four places, so the family is
   restated here rather than changed in one variable.
   JetBrains Mono sets Latin on a 0.6em advance and has no Chinese; Maple Mono CN
   picks up the Chinese on a 1.2em advance, which is exactly two Latin columns,
   so a Chinese comment lines up with the rows above and below it. A Chinese font
   on the usual 1em advance would pull those rows out of step. */
.prose code,
.prose kbd,
.prose pre,
.prose .highlight table,
.prose pre[class*="language-"],
.code-copy {
  font-family: "JetBrains Mono", "Maple Mono CN", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ---------------------------------------------------------- dark mode ----- */
/* The theme has a single palette. These are the same seven tokens in dark,
   plus the handful of places where a color is written out in full and so does
   not follow the tokens. */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e1c2a;
    --paper-low: #17293a;
    --ink: #dce8f2;
    --muted: #8ca5b9;
    --accent: #7fc2e8;
    --honey: #ffd166;
    --rule: #2a4157;
  }

  /* Yellow stays yellow in dark mode, so everything sitting on it needs a dark
     foreground rather than the light --ink it would otherwise inherit. */
  ::selection { color: #0e1c2a; }
  .prose mark,
  .prose .highlight .line.marked,
  .margin-paper,
  .menu-toggle[aria-expanded="true"] { color: #0e1c2a; }

  /* Syntax highlighting: the theme's olive green for strings is meant for a
     cream code block and goes muddy on a dark one. */
  .highlight .string,
  .highlight .attr { color: #a3c98a; }
}