/* ============================================================
 * Wanxing · Wenxin (文心)  —  colors + typography
 * ------------------------------------------------------------
 * Semantic design tokens: color, type scale, spacing, motion.
 *
 * Soul: 克制之美 · 温暖极简 · 暖土调
 *       Warm white. Deep charcoal. A single cinnabar accent.
 * ============================================================ */

/* -----------------------------------------------------------
 * Fonts — SELF-HOSTED, no external CDN (privacy: no IP leak to
 * Google). The woff2 + @font-face rules are generated by
 * scripts/build-fonts.ts → public/fonts/fontface.css:
 *   Latin (Lora / EB Garamond / JetBrains Mono) = Google `latin`
 *     subset, re-hosted;  Noto Serif SC = subset to the site glyphs.
 * Re-run `bun run fonts` after editing page copy (CJK is subsetted).
 * UI sans-serif uses the system stack; no webfont needed.
 * ----------------------------------------------------------- */
@import url("fonts/fontface.css");

:root {
  /* =========================================================
   * COLOR — reference values
   * Use the semantic aliases below in components, not these.
   * ========================================================= */

  /* Background layer — pages of warm paper */
  --warm-white:  #F2F0EB;   /* hero / showcase pages */
  --base-white:  #FAFAF8;   /* inner pages */
  --pure-white:  #FFFFFF;   /* article body */
  --subtle-bg:   #F0EDE7;   /* code / blockquote / tag wash */

  /* Text layer — never pure black */
  --ink:         #3A3837;   /* body */
  --ink-heading:#2C2B29;    /* heading, slightly deeper */
  --warm-gray:   #6E6B66;   /* secondary text — AA 4.66:1 on warm-white */
  --muted:       #B0ABA4;   /* copyright, placeholder */

  /* Accent — the one cinnabar stamp on the page */
  --brick:        #8B3525;
  --brick-hover:  #A84030;
  --brick-subtle: #F5E8E5;

  /* Borders — used sparingly */
  --border-subtle: #E5E1DA;
  --border-strong: #C8C3BA;

  /* Focus — keyboard rings only */
  --focus-ring: rgba(139, 53, 37, 0.4);


  /* =========================================================
   * COLOR — semantic aliases (use these)
   * ========================================================= */

  /* Backgrounds */
  --bg-1: var(--warm-white);   /* canvas */
  --bg-2: var(--base-white);   /* surface */
  --bg-3: var(--pure-white);   /* article / pure */
  --bg-4: var(--subtle-bg);    /* tint / code */

  /* Foregrounds */
  --fg-1: var(--ink-heading);  /* headings */
  --fg-2: var(--ink);          /* body */
  --fg-3: var(--warm-gray);    /* secondary */
  --fg-4: var(--muted);        /* muted */

  /* Accent */
  --accent:        var(--brick);
  --accent-hover:  var(--brick-hover);
  --accent-subtle: var(--brick-subtle);

  /* Lines */
  --line-1: var(--border-subtle);
  --line-2: var(--border-strong);


  /* =========================================================
   * TYPOGRAPHY — font families
   * Latin serif first, CJK serif fallback. Same temperature.
   * ========================================================= */

  --serif-display: "Lora", "Georgia", "Noto Serif SC", "Source Han Serif SC", serif;
  --serif-body:    "EB Garamond", "Crimson Text", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans-ui:       "SF Pro Text", system-ui, "Noto Sans SC", "PingFang SC", sans-serif;
  --mono:          "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* Type scale — Major Third (1.250) */
  --t-xs:   0.694rem;   /* 11px · footnote / copyright */
  --t-sm:   0.833rem;   /* 13px · metadata, labels */
  --t-base: 1rem;       /* 16px · baseline */
  --t-md:   1.0625rem;  /* 17px · body reading */
  --t-lg:   1.25rem;    /* 20px · lede, subhead */
  --t-xl:   1.5rem;     /* 24px · h3 */
  --t-2xl:  1.875rem;   /* 30px · h2 */
  --t-3xl:  2.25rem;    /* 36px · h1 */
  --t-4xl:  3rem;       /* 48px · section / nav display */
  --t-5xl:  4.5rem;     /* 72px · hero / brand */

  /* Leading */
  --lh-tight:   1.25;
  --lh-snug:    1.45;
  --lh-normal:  1.6;
  --lh-relaxed: 1.85;   /* CJK body default */
  --lh-loose:   2.0;    /* Latin long-form */

  /* Tracking */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.05em;
  --tr-wider:   0.15em;   /* uppercase labels */
  --tr-cjk:     0.1em;    /* display CJK */


  /* =========================================================
   * SPACING — 4px grid
   * ========================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;   /* paragraph gap */
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;   /* section gap */
  --s-32: 128px;


  /* =========================================================
   * RADII — ≤ 4px, no playful curves
   * ========================================================= */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-full: 9999px;


  /* =========================================================
   * MOTION — 春雨润物
   * ========================================================= */
  --d-instant: 80ms;
  --d-fast:    180ms;
  --d-base:    260ms;
  --d-slow:    420ms;
  --d-crawl:   600ms;

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);


  /* =========================================================
   * LAYOUT — content widths
   * ========================================================= */
  --w-article:  clamp(520px, 55vw, 640px);
  --w-content:  clamp(620px, 65vw, 760px);
  --w-showcase: clamp(700px, 72vw, 920px);
  --pad-x:      clamp(20px, 5vw, 72px);
}


/* ============================================================
 * Dark mode — 夜晚的羊皮纸 (night vellum)
 * Auto via OS preference + manual via [data-theme="dark"].
 * ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --warm-white: #1A1816;
    --base-white: #201E1B;
    --pure-white: #242220;
    --subtle-bg:  #2A2724;

    --ink:         #E8E3DC;
    --ink-heading: #F0EBE3;
    --warm-gray:   #8A857D;
    --muted:       #5A5550;

    --brick:        #C4533E;
    --brick-hover:  #D9614A;
    --brick-subtle: #2E1A16;

    --border-subtle: #2E2B27;
    --border-strong: #403C37;

    --focus-ring: rgba(196, 83, 62, 0.4);
  }
}

[data-theme="dark"] {
  --warm-white: #1A1816;
  --base-white: #201E1B;
  --pure-white: #242220;
  --subtle-bg:  #2A2724;

  --ink:         #E8E3DC;
  --ink-heading: #F0EBE3;
  --warm-gray:   #8A857D;
  --muted:       #5A5550;

  --brick:        #C4533E;
  --brick-hover:  #D9614A;
  --brick-subtle: #2E1A16;

  --border-subtle: #2E2B27;
  --border-strong: #403C37;

  --focus-ring: rgba(196, 83, 62, 0.4);
}


/* ============================================================
 * Semantic element styles
 * Drop this stylesheet on any page, get the Wenxin baseline.
 * ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--serif-body);
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  background: var(--bg-1);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-weight: 700;
}

h1 {
  font-family: var(--serif-display);
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-cjk);
  margin-bottom: var(--s-8);
}

h2 {
  font-family: var(--serif-body);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  margin-top: var(--s-16);
  margin-bottom: var(--s-6);
}

h3 {
  font-family: var(--serif-body);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
}

h4 {
  font-family: var(--serif-body);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--fg-3);
}

h5, h6 {
  font-family: var(--sans-ui);
  font-size: var(--t-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
}

p {
  margin-bottom: var(--s-5);
  text-wrap: pretty;
}

a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-default);
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

small,
.meta {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--sans-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-4);
}

code,
.code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-4);
  padding: 2px 6px;
  border-radius: 3px;
}

pre {
  font-family: var(--mono);
  font-size: var(--t-sm);
  background: var(--bg-4);
  padding: var(--s-4);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r-md);
  overflow-x: auto;
}

blockquote {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--fg-3);
  background: var(--bg-4);
  border-left: 2px solid var(--accent);
  padding: var(--s-4) var(--s-6);
  margin: var(--s-8) 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-1);
  margin: var(--s-12) 0;
}


/* ============================================================
 * Brand marker · ■
 * The breathing cinnabar square that follows the brand name.
 * ============================================================ */
.brand-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: var(--s-1);
  animation: wenxin-breath 4s ease-in-out infinite;
}

@keyframes wenxin-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}


/* ============================================================
 * Reduced motion — respect the user
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}