:root {
  /* Surface */
  --color-paper: #F7F7F3;
  --color-surface: #FFFFFF;
  --color-void: #0B0C0F;
  --color-void-text: #F4F5F7;

  /* Ink */
  --color-text: #111318;
  --color-text-muted: #626872;
  --color-line: #D9DDE3;
  --color-accent: #145DFF;

  /* Evidence states */
  --color-success: #18794E;
  --color-warning: #A15C00;
  --color-error: #C9342F;

  /* Typography */
  --font-display: "Bodoni Moda", "Noto Serif SC", "Songti SC", serif;
  --font-body: "Sora", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", monospace;

  /* Type scale (from UI_SPEC, tightened for this system) */
  --text-display: clamp(52px, 9vw, 132px);
  --text-h1: clamp(42px, 6.5vw, 92px);
  --text-h2: clamp(28px, 3.5vw, 48px);
  --text-h3: clamp(21px, 2vw, 30px);
  --text-lead: clamp(17px, 1.8vw, 22px);
  --text-body: clamp(15px, 1.2vw, 17px);
  --text-small: clamp(13px, 1vw, 14px);
  --text-meta: 12px;

  /* Containers */
  --container-site: 1440px;
  --container-feature: 1280px;
  --container-article: 760px;
  --container-technical: 880px;
  --page-gutter: clamp(16px, 4vw, 64px);
  --grid-gutter: clamp(16px, 2vw, 32px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);

  /* Shape */
  --radius-none: 0;
  --radius-small: 4px;
  --radius-medium: 8px;

  /* Header */
  --header-height: 72px;
  --header-height-mobile: 60px;

  /* Thread */
  --thread-width: 1px;

  /* Theme transition */
  --theme-transition: color var(--duration-normal) var(--ease-out),
                      background-color var(--duration-normal) var(--ease-out),
                      border-color var(--duration-normal) var(--ease-out),
                      fill var(--duration-normal) var(--ease-out);
}

@media (max-width: 767px) {
  :root {
    --text-display: clamp(40px, 12vw, 64px);
    --text-h1: clamp(36px, 10vw, 56px);
    --page-gutter: 16px;
  }
}

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

/* Dark mode: system preference unless manually overridden */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #0B0C0F;
    --color-surface: #111318;
    --color-text: #F4F5F7;
    --color-text-muted: #9CA3AF;
    --color-line: #2A2E36;
    --color-accent: #4B8AFF;
  }
}

:root[data-theme="dark"] {
  --color-paper: #0B0C0F;
  --color-surface: #111318;
  --color-text: #F4F5F7;
  --color-text-muted: #9CA3AF;
  --color-line: #2A2E36;
  --color-accent: #4B8AFF;
}

/* Smooth theme transitions on elements that change tokens */
body,
.site-header,
.mobile-menu,
.btn,
.filter-chip,
.language-switch__link,
.content-card,
.cfd-card,
.timeline__entry,
.masonry__item,
.art-card__view,
.timeline__thread::after {
  transition: var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-header,
  .mobile-menu,
  .btn,
  .filter-chip,
  .language-switch__link,
  .content-card,
  .cfd-card,
  .timeline__entry,
  .masonry__item,
  .art-card__view,
  .timeline__thread::after {
    transition: none;
  }
}