/* Aesthetic Agent Identity — CSS Design Tokens
 *
 * These tokens are independent of PaperMod's --theme / --primary / --secondary.
 * Language switching via :lang(zh) / :lang(en) selectors.
 * Dark mode via body.dark (PaperMod adds .dark to body, not html).
 * lang attribute is on html, so use html:lang(zh) body.dark for Chinese dark mode.
 */

/* ─── Light / English (default) ───────────────────────────── */
:root {
  --color-paper:        #f9f9f7;
  --color-ink:          #1a1c1b;
  --color-ink-muted:    #5e5e63;
  --color-accent:       #2e352e;
  --color-accent-soft:  #dde5da;
  --color-rule:         rgba(30, 35, 30, 0.12);

  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-prose:   'Noto Serif', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-meta:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Compat aliases for components using font-serif/sans/mono naming */
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  --line-height-prose: 1.75;
  --tracking-prose:    normal;
  --drop-cap-size:     5rem;

  /* Semantic aliases for PaperMod compat */
  --color-bg:           var(--color-paper);
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-muted);
  --color-text-heading: var(--color-ink);
  --color-border:       var(--color-rule);

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ---------- Shadow (soft, editorial) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);

  /* ---------- Theme transition ---------- */
  --theme-transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;

  /* ---------- Native UA colour scheme ----------
     Tell the browser the page is a LIGHT surface so user-agent–rendered
     UI matches the light design: native form controls (un-styled
     checkboxes/radios, <select> dropdown popups, date/time pickers,
     number-input spinners), the textarea resize grip, spellcheck
     underlines, and any sub-element scrollbars the custom rules don't
     cover all paint light. This is the browser default, so it is a no-op
     for the existing light appearance — declared explicitly so that a
     visitor whose OS prefers dark, but who is viewing the site in light,
     still gets light native controls instead of OS-dark ones. */
  color-scheme: light;
}

/* ─── Light / Chinese override ─────────────────────────────── */
html:lang(zh) {
  --color-paper:        #fbf9f4;
  --color-ink:          #350003;
  --color-ink-muted:    #6c5b4e;
  --color-accent:       #862122;
  --color-accent-soft:  #eae8e3;
  --color-rule:         rgba(53, 0, 3, 0.10);

  /* Songti SC / STSong sit before the sans fallbacks so the long
     Noto Serif SC webfont download (dozens of CJK unicode-range
     subsets) swaps serif→serif instead of flashing sans first. */
  --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC',
                  'STSong', 'SimSun', 'PingFang SC', 'Hiragino Sans GB',
                  'Microsoft YaHei', serif;
  --font-body:    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                  system-ui, sans-serif;
  --font-meta:    'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;

  --line-height-prose: 2.0;
  --tracking-prose:    0.02em;
  --drop-cap-size:     4.5rem;
}

/* ─── Dark / English ───────────────────────────────────────── */
body.dark:lang(en),
[data-theme="dark"]:lang(en) {
  --color-paper:        #121413;
  --color-ink:          #e2e3e1;
  --color-ink-muted:    #b4bcb2;
  --color-accent:       #7dd3fc;
  --color-accent-soft:  rgba(125, 211, 252, 0.10);
  --color-rule:         rgba(226, 227, 225, 0.10);

  /* Re-bind the semantic aliases inside the dark scope. They are first
     defined on :root as var(--color-ink) etc., but the dark palette
     overrides live here on body.dark — a descendant of :root — so the
     :root-level aliases would otherwise resolve against the LIGHT ink and
     leak light colours into dark mode (e.g. dark-on-dark TL;DR text).
     Re-declaring them here makes var(--color-ink) resolve to the dark value. */
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-muted);
  --color-text-heading: var(--color-ink);
  --color-border:       var(--color-rule);
  --color-bg:           var(--color-paper);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ─── Dark / Chinese ───────────────────────────────────────── */
html:lang(zh) body.dark,
html:lang(zh) [data-theme="dark"] {
  --color-paper:        #1c1917;
  --color-ink:          #f5f3ee;
  --color-ink-muted:    #a8a29e;
  /* ZH dark accent — softened from the pure #ff3b3b.
     The old value was the lowest-contrast accent in the whole dark palette:
     4.95:1 on the paper and only 4.58:1 on the faintly-lifted card surface
     (rgba(255,255,255,0.03)) — i.e. it cleared the WCAG-AA 4.5:1 floor by a
     hair, exactly where the accent is smallest (footnote/citation markers,
     active-TOC labels, in-prose link hover). A fully-saturated pure red also
     "buzzes"/haloes against a dark surface in long-form reading. #ff6b6b is
     already the established ZH-dark red elsewhere in this codebase (the code
     keyword token, article-typography §4 dark/ZH), so adopting it here
     HARMONISES the dark reds into one family rather than introducing a new
     hue, while lifting contrast to a comfortable 6.30:1 paper / 5.84:1 card
     and calming the glare. Light/ZH accent (#862122) lives in a separate
     html:lang(zh) block and is untouched — this is gated on body.dark. */
  --color-accent:       #ff6b6b;
  --color-accent-soft:  #2e1a19;
  --color-rule:         rgba(245, 243, 238, 0.10);

  /* See note in the dark/English block: re-bind aliases to the dark palette. */
  --color-text:         var(--color-ink);
  --color-text-muted:   var(--color-ink-muted);
  --color-text-heading: var(--color-ink);
  --color-border:       var(--color-rule);
  --color-bg:           var(--color-paper);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ─── Global background: paper tone from design spec ───────── */
/* Override PaperMod's pure white with the warm #f9f9f7 surface */
body:not(.dark) {
  background-color: var(--color-paper, #f9f9f7) !important;
}

/* Dark counterpart: without this, dark mode fell back to PaperMod's
   default page grey (--theme #1d1e20) on the <body> — including the
   .dark.list rule that repaints list/section pages with var(--theme) —
   while the article column painted the custom paper (--color-paper:
   #121413 EN / #1c1917 ZH). That left a visible seam around the reading
   column on article pages and a greyer, mismatched surface on the home /
   list / archive pages than the prose they frame. Mirror the light rule
   so the whole page sits on the same paper tone as the article surface,
   restoring the seamless single-surface reading look the light mode
   already has. Token-driven, so EN/ZH dark resolve automatically; the
   !important matches the light rule and overrides the un-!important
   .dark.list / PaperMod body background. Gated on body.dark —
   light mode is never selected and is provably unchanged. */
body.dark {
  background-color: var(--color-paper) !important;
  /* Belt-and-suspenders for the native UA scheme: PaperMod toggles `.dark`
     on <body>, and the root rule above relies on :has() to reach <html>.
     Setting color-scheme here too ensures native controls inside <body>
     render dark even on engines without :has() support. Gated on body.dark —
     light mode is never selected. */
  color-scheme: dark;
}

/* Match the unified dark paper on the <html> root too. The body fix above
   paints the page, but the root element (html) keeps the browser default
   (white/canvas), which shows through during iOS Safari / macOS trackpad
   overscroll "rubber-band" scrolling and momentarily before the body paints
   — flashing a glaring white band at the top/bottom edge of an otherwise
   dark page. Paint the root the same dark paper so the surface stays
   seamless to the very edge.
   NOTE: --color-paper is overridden on body.dark / html:lang(zh) body.dark —
   both DESCENDANTS of html — and custom properties inherit downward only, so
   var(--color-paper) resolves to the LIGHT value here on the html ancestor
   (the same gotcha the dark-token block documents). Use the explicit
   per-language dark values, kept in sync with the dark tokens above. The
   :lang(zh) rule carries higher specificity and follows the generic one, so
   Chinese dark resolves to its warm paper. Gated on the dark root — light
   mode never matches and is provably unchanged. */
html:has(body.dark),
html[data-theme="dark"] {
  background-color: #121413; /* EN dark paper — mirrors --color-paper */
  /* Flip the native UA colour scheme to dark on the root so browser-drawn
     UI matches the dark surface: the pre-paint canvas (no white flash before
     CSS applies), the default page scrollbar where the custom rule doesn't
     reach (e.g. Firefox sub-scrollers), and any un-styled native form control,
     <select> popup or picker render dark instead of glaring light. Gated on
     the dark root — light mode never matches and is provably unchanged. */
  color-scheme: dark;
}
html:lang(zh):has(body.dark),
html:lang(zh)[data-theme="dark"] {
  background-color: #1c1917; /* ZH dark paper — mirrors --color-paper */
  color-scheme: dark;
}

/* ─── Prose background from token ──────────────────────────── */
.article-main {
  background: var(--color-paper);
  transition: background 0.2s ease;
}

/* Apply transition to key elements for smooth theme switching */
body,
header,
.post-entry,
nav,
footer {
  transition: var(--theme-transition);
}
