:root {
  /* Primitive color tokens */
  --paper-0: #f7f7f5;
  --paper-1: #f0f1f2;
  --paper-2: #e6e9ec;
  --ink-0: #15181c;
  --ink-1: #3d434a;
  --ink-2: #68707a;
  --line-light: #d7dbe0;
  --cobalt-500: #284d6a;
  --cobalt-600: #1c3b52;
  --red-500: #c73d35;
  --amber-500: #9b6816;
  --green-500: #25734a;
  --night-0: #111417;
  --night-1: #171b1f;
  --night-2: #20262c;
  --night-line: #30363d;
  --night-ink: #f1f3f4;
  --night-muted: #a6adb5;
  --night-cobalt: #8cabc2;

  /* Primitive spacing and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --radius-sm: 0.35rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --border-thin: 1px;
  --shadow-float: 0 1.25rem 3.5rem rgb(23 24 20 / 0.12);

  /* Primitive typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-display: "yzworkstation Display", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.7vw, 1.55rem);
  --text-2xl: clamp(1.75rem, 3vw, 2.7rem);
  --text-display: clamp(2.9rem, 6vw, 4.8rem);

  /* Primitive motion */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic tokens: light */
  --color-bg: var(--paper-0);
  --color-surface: var(--paper-1);
  --color-surface-strong: var(--paper-2);
  --color-text: var(--ink-0);
  --color-text-soft: var(--ink-1);
  --color-text-muted: var(--ink-2);
  --color-line: var(--line-light);
  --color-accent: var(--cobalt-500);
  --color-accent-strong: var(--cobalt-600);
  --color-on-accent: #fff;
  --color-error: var(--red-500);
  --color-warning: var(--amber-500);
  --color-success: var(--green-500);
  --focus-ring: 0 0 0 3px rgb(40 77 106 / 0.24);

  /* Layout semantics */
  --shell: 74rem;
  --gutter: clamp(1.1rem, 3vw, 2.75rem);
  --section-space: clamp(3.5rem, 6vw, 5.5rem);
  --content-measure: 70ch;

  /* Component tokens */
  --header-height: 4rem;
  --button-height: 2.9rem;
  --button-radius: 0.3rem;
  --dialog-radius: var(--radius-lg);
}

html[data-theme="dark"] {
  --color-bg: var(--night-0);
  --color-surface: var(--night-1);
  --color-surface-strong: var(--night-2);
  --color-text: var(--night-ink);
  --color-text-soft: #d4d6ce;
  --color-text-muted: var(--night-muted);
  --color-line: var(--night-line);
  --color-accent: var(--night-cobalt);
  --color-accent-strong: #b4cad8;
  --color-on-accent: #10110f;
  --focus-ring: 0 0 0 3px rgb(140 171 194 / 0.28);
  --shadow-float: 0 1.25rem 3.5rem rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --color-bg: var(--night-0);
    --color-surface: var(--night-1);
    --color-surface-strong: var(--night-2);
    --color-text: var(--night-ink);
    --color-text-soft: #d4d6ce;
    --color-text-muted: var(--night-muted);
    --color-line: var(--night-line);
    --color-accent: var(--night-cobalt);
    --color-accent-strong: #b4cad8;
    --color-on-accent: #10110f;
    --focus-ring: 0 0 0 3px rgb(140 171 194 / 0.28);
    --shadow-float: 0 1.25rem 3.5rem rgb(0 0 0 / 0.35);
  }
}

@media (max-width: 48rem) {
  :root {
    --header-height: 4rem;
    --section-space: 3.75rem;
  }
}