/* =========================================================
   base.css — design tokens, reset, typography, shared components
   Load order: base.css → layout.css → sections.css
   ========================================================= */

/* ----- Design tokens ----- */
:root {
  /* Greens (brand) */
  --green-dark: #357a46;     /* dark sections — deep enough for white body text */
  --green-darker: #24572f;   /* footer, headings on light sections */
  --green-deepest: #1f3d26;  /* text on gold and on light sections */
  --green-light: #9cd256;    /* light sections */

  /* Gold (accent / buttons) */
  --gold: #e2a72e;
  --gold-hover: #c98f1c;
  --gold-light: #f2c14e;     /* gold text on dark green (large sizes only) */

  --white: #ffffff;
  --card-text: #2b3a2f;
  --muted: #6b7a6f;

  /* Type: Latin web fonts load async; Chinese falls back to system fonts */
  --font-display: "Playfair Display", "Noto Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(20, 50, 28, .12);
  --shadow-md: 0 10px 28px rgba(20, 50, 28, .18);
  --container: 1120px;
  --nav-h: 72px;
  --gap: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--white);
  background: var(--green-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
p { margin: 0 0 1em; }
::selection { background: var(--gold); color: var(--green-deepest); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 30px;
  background: var(--gold);
  color: var(--green-deepest);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(226, 167, 46, .35);
  cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:hover, .btn:focus-visible {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 143, 28, .4);
}
.btn:active { transform: translateY(0); }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 16px 38px; font-size: 17px; }
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ----- Utilities ----- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Language-only content (see assets/js/i18n.js). Pure CSS on <html lang>, so it is
   correct from the first paint — the inline <head> script sets the language early. */
html:not(:lang(zh)) [data-lang-only="zh"],
html:not(:lang(en)) [data-lang-only="en"] { display: none !important; }

/* Chinese has no true italics (browsers fake a slant), so emphasis stays upright there */
/* (:root raises specificity above component rules like .hero__title em) */
:root em:lang(zh) { font-style: normal; }

/* Scroll-reveal: only active when JS has added .js to <html> */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media print {
  .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}