/* ==========================================================================
   陛下信箱 · Bixia Mailbox — Design Tokens
   Modern minimalism with restrained oriental-court accents.
   ========================================================================== */

/* Webfonts — fully self-hosted, NO external CDN.
   fonts.googleapis.com is blocked/unreliable in mainland China, so the Latin
   face (Inter, used for digits & latin) is bundled under /assets/fonts. CJK
   text relies on the system-font stacks below (PingFang / 微软雅黑 / 宋体 /
   Songti …), which always render arbitrary user-submitted characters without
   shipping a multi-megabyte CJK font or relying on a dynamic-subset CDN.
   To upgrade to 思源宋体 later, add subsetted woff2 here as more @font-face blocks. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/inter-latin-700.woff2') format('woff2');
}

:root {
  /* ---------- Color — Core palette ---------- */
  --paper:        #FAF7F2;   /* 奶白, page background */
  --paper-2:      #F3EEE4;   /* slightly deeper cream for subtle zones */
  --paper-3:      #ECE5D6;   /* card dividers, hairlines on paper */
  --ink:          #1C1C1C;   /* 墨黑, primary text */
  --ink-2:        #3A3834;   /* secondary text */
  --ink-3:        #8B8680;   /* 淡灰, muted / hint text */
  --ink-4:        #BFB9AE;   /* disabled, placeholder */
  --hairline:     #E4DDCD;   /* 1px borders on light */
  --surface:      #FFFFFF;   /* elevated card / input / modal background (themed for dark) */

  /* ---------- Color — Brand accent (古铜金) ---------- */
  --bronze:       #B8935A;   /* primary accent */
  --bronze-soft:  #D4B789;   /* hover-light variant */
  --bronze-deep:  #8E6F3E;   /* pressed / active */
  --bronze-wash:  #F1E8D7;   /* bg tint for badges / highlight */
  --bronze-line:  #D9C4A1;   /* decorative line / border */

  /* ---------- Color — Semantic (restrained, never shouty) ---------- */
  --success:      #6B8E5A;   /* calm leaf green */
  --success-bg:   #EDF1E4;
  --warning:      #C89B3C;   /* warm amber */
  --warning-bg:   #F6ECD2;
  --danger:       #B45A5A;   /* soft vermillion — not red alert */
  --danger-bg:    #F3E0DE;
  --info:         #6C7A8E;   /* slate blue */
  --info-bg:      #E7EBF0;

  /* ---------- Color — Dark mode (mirrored) ---------- */
  --dark-bg:      #1A1814;
  --dark-bg-2:    #23201B;
  --dark-bg-3:    #2C2822;
  --dark-ink:     #EDE6D6;
  --dark-ink-2:   #BFB6A4;
  --dark-ink-3:   #7C766B;
  --dark-hairline:#3A352C;

  /* ---------- Type — Families ---------- */
  /* CJK = system fonts (no download). Order covers macOS/iOS, Windows, Android,
     and anyone who happens to have Source Han / Noto installed. */
  --font-serif:  'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Songti SC', 'STSong', 'SimSun', '宋体', Georgia, serif;
  --font-sans:   'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num:    'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif; /* Latin + digits */

  /* ---------- Type — Scale (display → caption) ---------- */
  --fs-display:   clamp(48px, 7.5vw, 96px);   /* Hero 陛下信箱 */
  --fs-h1:        clamp(36px, 4.5vw, 56px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;
  --fs-stat:      clamp(48px, 6vw, 72px);     /* big numerical stats */

  /* ---------- Type — Weights ---------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* ---------- Type — Leading & tracking ---------- */
  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.5;
  --lh-relaxed:   1.75;
  --lh-loose:     2;

  --tr-tight:     -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.04em;
  --tr-widest:    0.12em;  /* small-caps-style labels */

  /* ---------- Spacing (8px base, a few half-steps) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ---------- Radii ---------- */
  --r-xs:   2px;
  --r-sm:   4px;    /* form inputs */
  --r-md:   8px;    /* buttons */
  --r-lg:   12px;   /* cards */
  --r-xl:   20px;
  --r-full: 999px;

  /* ---------- Shadows (soft, warm, paper-like) ---------- */
  --sh-sm:  0 1px 2px rgba(28, 28, 28, 0.04), 0 1px 1px rgba(28, 28, 28, 0.03);
  --sh-md:  0 4px 12px rgba(28, 28, 28, 0.06), 0 1px 2px rgba(28, 28, 28, 0.04);
  --sh-lg:  0 12px 32px rgba(28, 28, 28, 0.08), 0 2px 6px rgba(28, 28, 28, 0.04);
  --sh-xl:  0 24px 60px rgba(28, 28, 28, 0.12), 0 4px 12px rgba(28, 28, 28, 0.06);
  --sh-bronze: 0 6px 20px rgba(184, 147, 90, 0.28);     /* glow on primary CTA hover */
  --sh-inset: inset 0 0 0 1px var(--hairline);

  /* ---------- Layout ---------- */
  --content-narrow:  720px;   /* 奏折详情 */
  --content-default: 1040px;  /* 御批精选 grid */
  --content-wide:    1200px;  /* dashboard */
  --header-h:        72px;
  --header-h-mobile: 56px;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-seal:    cubic-bezier(0.34, 1.56, 0.64, 1); /* stamp bounce */
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     380ms;
  --dur-seal:     600ms;

  /* ---------- Z-layers ---------- */
  --z-nav:     100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ==========================================================================
   Dark mode · 暗夜朝堂
   The whole UI is token-driven, so dark mode is mostly a remap of the core
   semantic tokens. Activated by data-theme="dark" on <html> (set by the boot
   script in each index.html, which also honours the system preference). A few
   hardcoded-light pieces (paper gradients, status pills) get targeted overrides
   in each kit's styles.css.
   ========================================================================== */
:root[data-theme="dark"] {
  /* surfaces & ink — from the --dark-* palette */
  --paper:        #1A1814;
  --paper-2:      #23201B;
  --paper-3:      #2C2822;
  --ink:          #EDE6D6;
  --ink-2:        #C5BCA9;
  --ink-3:        #8E877A;
  --ink-4:        #5C564C;
  --hairline:     #3A352C;
  --surface:      #24211A;   /* cards sit just above the page bg */

  /* bronze — nudge a touch brighter so it sings on dark surfaces */
  --bronze:       #C9A368;
  --bronze-soft:  #E0C892;
  --bronze-deep:  #B8935A;
  --bronze-wash:  #2E2718;   /* dark bronze tint for badges / highlight zones */
  --bronze-line:  #4A3F2A;

  /* semantic — keep hues, swap the light tint backgrounds for dark ones */
  --success:      #84A86F;
  --success-bg:   #232A1E;
  --warning:      #D8B05A;
  --warning-bg:   #2E2716;
  --danger:       #D07A7A;
  --danger-bg:    #2E1F1F;
  --info:         #8593A6;
  --info-bg:      #1E232B;

  /* shadows — pure-black & deeper so elevation reads on dark paper */
  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.24);
  --sh-md:  0 4px 12px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.28);
  --sh-lg:  0 12px 32px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.30);
  --sh-xl:  0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.34);
  --sh-bronze: 0 6px 20px rgba(201, 163, 104, 0.30);
}

/* ==========================================================================
   Semantic base styles — apply as utility classes or via @extend patterns
   ========================================================================== */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.subtitle {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--bronze);
  letter-spacing: var(--tr-wide);
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-2); }
p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-2); }
.small   { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ink-3); }
.caption { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--ink-3); letter-spacing: var(--tr-wide); }

/* Eyebrow / small-caps-style label — common in the brand for section tags */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--bronze);
}

/* Stat number — serif, tabular */
.stat-num {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Chinese proverb / long-form serif body (奏折正文) */
.serif-body {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink);
}

/* ==========================================================================
   Motion · accessibility + theme switch
   ========================================================================== */
/* Respect users who ask for less motion: neutralise the 28+ keyframes &
   transitions used across the kits (seal stamps, shimmers, slide-ins …). */
@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;
  }
}
/* Smooth the light↔dark switch (only while toggling; the boot script adds
   .bx-theme-anim for ~400ms). Disabled for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .bx-theme-anim,
  .bx-theme-anim *,
  .bx-theme-anim *::before,
  .bx-theme-anim *::after {
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.3s ease, box-shadow 0.35s ease !important;
  }
}

/* Keyboard focus — visible, on-brand, and only for keyboard users (not mouse
   clicks). Previously there was no focus-visible styling (a11y gap). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-radius: 3px;
}