/* IZHUODAO website V2 — design tokens, not a complete site stylesheet.
 * Copy into the existing project's token layer; do not replace its global CSS blindly.
 * Content and release rules: docs/01_IMPLEMENTATION_PLAN_V2.md
 */
:root {
  --zd-color-canvas: #F6F2EA;
  --zd-color-surface: #FBFAF7;
  --zd-color-soft: #ECE7DE;
  --zd-color-ink: #1F2421;
  --zd-color-muted: #5F655F;
  --zd-color-brand: #314236;
  --zd-color-brand-hover: #24342A;
  --zd-color-deep: #182B24;
  --zd-color-on-dark: #F6F2EA;
  --zd-color-line: #D9D4CB;
  --zd-color-focus-on-dark: #D9E4D5;

  --zd-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --zd-font-body: 1rem;
  --zd-font-h1: clamp(2rem, 4.5vw, 4rem);
  --zd-font-h2: clamp(1.625rem, 2.8vw, 2.5rem);
  --zd-font-h3: clamp(1.25rem, 1.8vw, 1.625rem);
  --zd-leading-heading: 1.25;
  --zd-leading-body: 1.75;

  --zd-container-max: 80rem; /* 1280 CSS px at 16px root font */
  --zd-gutter: 1.5rem;
  --zd-section-space: 3.5rem;
  --zd-grid-gap: 1.25rem;
  --zd-header-height: 4rem;
  --zd-control-min: 2.75rem;

  --zd-radius-card: 0.5rem;
  --zd-radius-input: 0.5rem;
  --zd-radius-button: 999px;
  --zd-shadow-soft: 0 8px 24px rgb(31 36 33 / 5%);
  --zd-motion-fast: 180ms;
  --zd-focus-color: var(--zd-color-brand);
}

@media (min-width: 768px) {
  :root {
    --zd-font-h1: clamp(2.625rem, 4.7vw, 3rem);
    --zd-font-h2: clamp(1.875rem, 3vw, 2.125rem);
    --zd-font-h3: clamp(1.375rem, 2vw, 1.5rem);
    --zd-gutter: 2rem;
    --zd-section-space: 4.5rem;
    --zd-grid-gap: 1.5rem;
    --zd-header-height: 4.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --zd-font-h1: clamp(3.5rem, 4.5vw, 4rem);
    --zd-font-h2: clamp(2.25rem, 2.8vw, 2.5rem);
    --zd-font-h3: clamp(1.375rem, 1.8vw, 1.625rem);
    --zd-gutter: 2.5rem;
    --zd-section-space: 6.5rem;
    --zd-header-height: 5rem;
  }
}

/* Apply on local dark sections, not as a full-site second theme. */
.zd-dark-section {
  --zd-focus-color: var(--zd-color-focus-on-dark);
  background-color: var(--zd-color-deep);
  color: var(--zd-color-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root { --zd-motion-fast: 0ms; }
}

/* Components must implement focus-visible, hover, disabled and error states.
 * A light border alone is not sufficient to indicate a form error or focus.
 * Container formula: min(100% - 2 * var(--zd-gutter), var(--zd-container-max)).
 * Use desktop/tablet/mobile composition rules in the implementation plan;
 * tokens alone do not make a responsive page.
 */