/* wenlueducation base styles — fonts, reset, default typography
 *
 * Load order:
 *   <link rel="stylesheet" href="/assets/css/tokens.css">  (variables only)
 *   <link rel="stylesheet" href="/assets/css/base.css">    (this file)
 *   <link rel="stylesheet" href="/assets/css/motion.css">  (reveal classes)
 *
 * Font loading: this file uses Google Fonts via @import as a self-contained
 * fallback. For best performance, HTML files should ALSO add explicit
 * preconnect + stylesheet <link>s in the document head; that lets the browser
 * fetch fonts in parallel with the CSS, instead of after.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display&family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ── Reset (modern, opinionated) ────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--wl-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wl-text);
  background: var(--wl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* ── Default typography ─────────────────────────────────── */
/* Strong rule: same element MUST NOT mix serif + sans. Headings are serif,
 * body/UI text is sans. If a heading contains an inline number, the number
 * stays serif (or use a span.font-mono if you want monospace). */

h1, h2, h3, h4 {
  font-family: var(--wl-font-serif);
  color: var(--wl-text);
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.15; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.3; }
h4 { font-size: 16px; line-height: 1.35; }

p {
  margin: 0 0 var(--wl-space-4) 0;
}

a {
  color: var(--wl-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--wl-dur-hover) ease;
}
a:hover {
  color: var(--wl-primary-hover);
}

::selection {
  background: var(--wl-primary-light);
  color: var(--wl-primary-hover);
}

/* ── Focus ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--wl-primary);
  outline-offset: 2px;
  border-radius: var(--wl-radius-sm);
}

/* ── Reduced-motion: damp every transition + animation ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}