:root{
  /* ---- Brand core (verbatim from the CP Brand Guide) ---- */
  --cp-red: #be0920;        /* Primary */
  --cp-slate: #3f4656;      /* Secondary */
  --cp-sand: #f5f3ef;       /* Background */
  --cp-ink: #101010;        /* Text */

  /* ---- Red ramp (derived from --cp-red) ---- */
  --red-50: #fdf3f4;
  --red-100: #fadde0;
  --red-200: #f1b2b8;
  --red-300: #e2707d;
  --red-400: #d02a3c;
  --red-500: #be0920;
  --red-600: #a2081c;
  --red-700: #7d0615;
  --red-800: #57040f;

  /* ---- Slate ramp (derived from --cp-slate) ---- */
  --slate-50: #f3f4f6;
  --slate-100: #e3e5ea;
  --slate-200: #c5c9d2;
  --slate-300: #9ba2b0;
  --slate-400: #6c7486;
  --slate-500: #3f4656;
  --slate-600: #333946;
  --slate-700: #272c36;
  --slate-800: #1a1e25;

  /* ---- Sand ramp (derived from --cp-sand) ---- */
  --sand-50: #fbfaf8;
  --sand-100: #f5f3ef;
  --sand-200: #ece8e1;
  --sand-300: #ded8cd;
  --sand-400: #c6bdad;

  /* ---- Ink ---- */
  --ink-900: #101010;
  --ink-800: #24242a;
  --white: #ffffff;

  /* ---- Semantic: text ---- */
  --text-body: var(--ink-900);
  --text-muted: var(--slate-400);
  --text-subtle: var(--slate-300);
  --text-heading: var(--slate-500);
  --text-accent: var(--cp-red);
  --text-inverse: var(--sand-50);
  --text-link: var(--cp-red);
  --text-link-hover: var(--red-700);

  /* ---- Semantic: surface ---- */
  --surface-page: var(--sand-100);
  --surface-card: var(--white);
  --surface-raised: var(--sand-50);
  --surface-sunken: var(--sand-200);
  --surface-inverse: var(--slate-500);
  --surface-inverse-deep: var(--slate-700);
  --surface-accent: var(--cp-red);
  --surface-accent-soft: var(--red-50);
  --surface-overlay: rgba(26,30,37,.55);

  /* ---- Semantic: border ---- */
  --border-hairline: var(--sand-300);
  --border-default: var(--sand-400);
  --border-strong: var(--slate-300);
  --border-accent: var(--cp-red);
  --border-inverse: rgba(245,243,239,.22);

  /* ---- Semantic: interactive ---- */
  --action-primary: var(--cp-red);
  --action-primary-hover: var(--red-600);
  --action-primary-active: var(--red-700);
  --action-secondary: var(--slate-500);
  --action-secondary-hover: var(--slate-600);
  --action-secondary-active: var(--slate-700);
  --action-ghost-hover: var(--sand-200);
  --focus-ring: rgba(190,9,32,.32);
  --disabled-bg: var(--sand-200);
  --disabled-fg: var(--slate-300);

  /* ---- Semantic: status ---- */
  --status-success: #1f7a4d;
  --status-success-soft: #e6f2ec;
  --status-warning: #b0740c;
  --status-warning-soft: #fbf1de;
  --status-danger: var(--cp-red);
  --status-danger-soft: var(--red-50);
  --status-info: var(--slate-500);
  --status-info-soft: var(--slate-50);
}