:root {
  /* Primitive / color */
  --p-ink-950: #0e1420;
  --p-ink-900: #151d2a;
  --p-ink-800: #202b3b;
  --p-paper-050: #f1f3f6;
  --p-paper-100: #e7eaf0;
  --p-paper-200: #d5d9e2;
  --p-stone-500: #7a8494;
  --p-signal-500: #3157ff;
  --p-signal-600: #2444d6;
  --p-warm-500: #ff6849;
  --p-signal-a18: rgba(49,87,255,.18);
  --p-signal-a44: rgba(49,87,255,.44);
  --p-white: #ffffff;
  --p-black-a08: rgba(16,17,19,.08);
  --p-black-a18: rgba(16,17,19,.18);
  --p-black-a42: rgba(16,17,19,.42);
  --p-black-a72: rgba(16,17,19,.72);
  --p-white-a18: rgba(255,255,255,.18);
  --p-white-a48: rgba(255,255,255,.48);
  --p-white-a82: rgba(255,255,255,.82);

  /* Primitive / space (4px base) */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-20: 80px;
  --p-space-24: 96px;

  /* Primitive / type */
  --p-font-display: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --p-font-body: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --p-font-ui: Bahnschrift, "Arial Narrow", sans-serif;
  --p-font-mono: Consolas, monospace;
  --p-text-2xs: 8px;
  --p-text-xs: 10px;
  --p-text-sm: 12px;
  --p-text-md: 14px;
  --p-text-lg: 18px;
  --p-text-xl: 24px;
  --p-text-2xl: 36px;
  --p-text-display: clamp(48px, 14.8vw, 66px);

  /* Primitive / motion */
  --p-duration-quick: 140ms;
  --p-duration-standard: 320ms;
  --p-duration-slow: 680ms;
  --p-duration-dramatic: 980ms;
  --p-ease-premium: cubic-bezier(.4,0,.2,1);
  --p-ease-enter: cubic-bezier(.05,.7,.1,1);
  --p-ease-exit: cubic-bezier(.3,0,1,1);
  --p-ease-orbit: cubic-bezier(.16,1,.3,1);

  /* Semantic */
  --color-canvas: var(--p-paper-050);
  --color-surface: var(--p-paper-100);
  --color-surface-strong: var(--p-ink-950);
  --color-text: var(--p-ink-950);
  --color-text-inverse: var(--p-paper-050);
  --color-text-muted: var(--p-stone-500);
  --color-border: var(--p-black-a18);
  --color-border-inverse: var(--p-white-a18);
  --color-focus: var(--p-signal-500);
  --color-action: var(--p-ink-950);
  --color-action-hover: var(--p-ink-800);
  --color-action-active: var(--p-signal-600);
  --space-page: clamp(16px, 5.2vw, 24px);
  --space-section: clamp(72px, 21vw, 96px);
  --type-display: var(--p-font-display);
  --type-body: var(--p-font-body);
  --type-ui: var(--p-font-ui);
  --type-data: var(--p-font-mono);
  --motion-fast: var(--p-duration-quick);
  --motion-standard: var(--p-duration-standard);
  --motion-slow: var(--p-duration-slow);
  --motion-dramatic: var(--p-duration-dramatic);
  --motion-ease: var(--p-ease-premium);

  /* Component */
  --topbar-height: 56px;
  --topbar-bg-scrolled: rgba(241,243,246,.92);
  --button-height-sm: 44px;
  --button-height-lg: 52px;
  --button-bg: var(--color-action);
  --button-fg: var(--color-text-inverse);
  --button-bg-hover: var(--color-action-hover);
  --button-bg-active: var(--color-action-active);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --panel-bg: var(--color-canvas);
  --panel-shadow: 0 -24px 80px var(--p-black-a42);
  --media-shadow: 0 24px 70px var(--p-black-a18);
}