:root {
  /* Primitive: color */
  --ink-950: #171918;
  --ink-850: #292d2b;
  --ink-700: #4b514e;
  --stone-500: #7c837f;
  --stone-300: #cfd4d1;
  --stone-180: #e5e9e7;
  --paper-50: #f3f5f2;
  --paper-0: #ffffff;
  --red-700: #9f2f26;
  --red-600: #c93f34;
  --red-100: #f2d8d3;
  --green-950: #15382f;
  --green-800: #1e4b3f;
  --green-700: #176b55;
  --green-100: #dce9e4;
  --gold-600: #b29351;
  --amber-700: #7f4a0d;
  --amber-600: #a66312;
  --amber-100: #f1dfbf;
  --white: #ffffff;

  /* Primitive: type */
  --font-sans: Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --text-display: 4rem;

  /* Primitive: spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Primitive: shape and motion */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --line-thin: 1px;
  --line-strong: 2px;
  --line-accent: 4px;
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-progress: 480ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Semantic */
  --color-canvas: var(--paper-50);
  --color-surface: var(--paper-0);
  --color-surface-inverse: var(--ink-950);
  --color-text: var(--ink-950);
  --color-text-soft: var(--ink-700);
  --color-text-muted: var(--stone-500);
  --color-text-inverse: var(--paper-0);
  --color-border: var(--stone-300);
  --color-border-soft: var(--stone-180);
  --color-accent: var(--red-600);
  --color-accent-strong: var(--red-700);
  --color-accent-soft: var(--red-100);
  --color-success: var(--green-700);
  --color-success-soft: var(--green-100);
  --color-warning: var(--amber-600);
  --color-warning-strong: var(--amber-700);
  --color-warning-soft: var(--amber-100);
  --color-focus: var(--red-600);
  --color-brand: var(--green-950);
  --color-brand-raised: var(--green-800);
  --color-brand-soft: var(--green-100);
  --color-gold: var(--gold-600);

  /* Component */
  --page-inline: var(--space-5);
  --page-max: 73.75rem;
  --section-block: var(--space-16);
  --progress-track: var(--stone-180);
  --progress-fill: var(--red-600);
  --status-complete: var(--green-700);
  --status-active: var(--red-600);
  --status-planned: var(--stone-500);
  --button-primary-bg: var(--ink-950);
  --button-primary-text: var(--paper-0);
  --button-primary-hover: var(--red-600);
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--ink-950);
  --button-secondary-border: var(--ink-950);
  --nav-active-bg: var(--ink-950);
  --nav-active-text: var(--paper-0);
}

@media (min-width: 48rem) {
  :root {
    --page-inline: var(--space-8);
    --section-block: var(--space-20);
    --text-display: 5rem;
  }
}