:root {
  /* Brand and semantic colors */
  --ui-color-brand-950: #071c2f;
  --ui-color-brand-900: #0a2740;
  --ui-color-brand-800: #103b5b;
  --ui-color-brand-700: #0d5d7a;
  --ui-color-accent-600: #007d9b;
  --ui-color-accent-500: #0097b8;
  --ui-color-accent-100: #dff5f8;
  --ui-color-ink: #122033;
  --ui-color-text: #33465a;
  --ui-color-muted: #708196;
  --ui-color-subtle: #94a3b8;
  --ui-color-line: #dce5ec;
  --ui-color-line-strong: #c8d5df;
  --ui-color-canvas: #f4f7fa;
  --ui-color-surface: #ffffff;
  --ui-color-surface-soft: #f8fafc;
  --ui-color-code: #0b1726;
  --ui-color-success: #0f8a67;

  /* Typography */
  --ui-font-sans: "Open Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font-serif: "Lora", "Noto Serif SC", "Songti SC", serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.875rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.25rem;
  --ui-text-2xl: 1.5rem;
  --ui-text-3xl: 2rem;
  --ui-text-4xl: clamp(2.25rem, 5vw, 3.8rem);
  --ui-leading-tight: 1.2;
  --ui-leading-heading: 1.35;
  --ui-leading-body: 1.82;

  /* Spacing follows an 8px base rhythm */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-space-7: 3rem;
  --ui-space-8: 4rem;
  --ui-space-9: 6rem;

  /* Shape, elevation and layout */
  --ui-radius-sm: 0.5rem;
  --ui-radius-md: 0.875rem;
  --ui-radius-lg: 1.25rem;
  --ui-radius-xl: 1.75rem;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 8px 22px rgba(7, 28, 47, 0.06);
  --ui-shadow-md: 0 20px 54px rgba(7, 28, 47, 0.09);
  --ui-shadow-focus: 0 0 0 4px rgba(0, 151, 184, 0.18);
  --ui-page-width: 1180px;
  --ui-reading-width: 760px;
  --ui-transition: 180ms ease;
}

.ui-surface {
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
}

.ui-eyebrow {
  color: var(--ui-color-accent-600);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text);
  padding: 0.2rem 0.65rem;
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  text-decoration: none;
}

.ui-chip:hover,
.ui-chip:focus-visible {
  border-color: rgba(0, 125, 155, 0.35);
  color: var(--ui-color-accent-600);
  text-decoration: none;
}

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