:root {
  /* Canonical tokens (used by current CSS) */
  --cp-color-bg-page: #faf9f7;
  --cp-color-surface: #ffffff;
  --cp-color-surface-subtle: #f3f1ee;
  --cp-color-border-subtle: #e6e2dd;
  --cp-color-border-strong: #d1ccc5;

  --cp-color-text-primary: #2e2e2b;
  --cp-color-text-secondary: #5f5e5b;
  --cp-color-text-muted: #8a8884;

  --cp-color-accent: #3b6e8f;
  --cp-color-accent-subtle: #e6eef4;

  --cp-color-status-on-track: #5f8f6e;
  --cp-color-status-on-track-subtle: #e8f1ec;
  --cp-color-status-at-risk: #c28a2c;
  --cp-color-status-at-risk-subtle: #f7eedb;
  --cp-color-status-off-track: #b5523b;
  --cp-color-status-off-track-subtle: #f4e6e2;
  --cp-color-status-info: #6b7c8f;
  --cp-color-status-info-subtle: #e9eef2;

  --cp-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --cp-font-strong: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --cp-size-page-title: 24px;
  --cp-size-section-title: 18px;
  --cp-size-card-title: 16px;
  --cp-size-body: 16px;
  --cp-size-secondary: 14px;
  --cp-size-label: 14px;

  --cp-line-height-body: 1.5;
  --cp-space-page-inline: 24px;
  --cp-space-page-inline-mobile: 16px;
  --cp-space-page-section: 24px;

  /* Shorthand aliases (ChatGPT token naming) */
  --cp-bg: var(--cp-color-bg-page);
  --cp-surface: var(--cp-color-surface);
  --cp-surface-subtle: var(--cp-color-surface-subtle);
  --cp-border: var(--cp-color-border-subtle);
  --cp-border-strong: var(--cp-color-border-strong);
  --cp-text: var(--cp-color-text-primary);
  --cp-text-2: var(--cp-color-text-secondary);
  --cp-text-muted: var(--cp-color-text-muted);
  --cp-accent: var(--cp-color-accent);
  --cp-accent-subtle: var(--cp-color-accent-subtle);
  --cp-ok: var(--cp-color-status-on-track);
  --cp-ok-subtle: var(--cp-color-status-on-track-subtle);
  --cp-warn: var(--cp-color-status-at-risk);
  --cp-warn-subtle: var(--cp-color-status-at-risk-subtle);
  --cp-risk: var(--cp-color-status-off-track);
  --cp-risk-subtle: var(--cp-color-status-off-track-subtle);
  --cp-info: var(--cp-color-status-info);
  --cp-info-subtle: var(--cp-color-status-info-subtle);
}