:root {
  /* ---- Base: ink & neutrals ---- */
  --ink: #181d26;
  --ink-active: #0d1218;
  --gray-800: #333840;
  --gray-700: #41454d;
  --gray-500: #9297a0;
  --gray-300: #dddddd;
  --gray-200: #e0e2e6;
  --gray-050: #f8fafc;
  --white: #ffffff;
  --near-black-elevated: #1d1f25;

  /* ---- Base: signature card surfaces ---- */
  --coral: #aa2d00;
  --forest: #0a2e0e;
  --cream: #f5e9d4;
  --peach: #fcab79;
  --mint: #a8d8c4;
  --yellow: #f4d35e;
  --mustard: #d9a441;

  /* ---- Base: semantic hues ---- */
  --blue-link: #1b61c9;
  --blue-link-active: #1a3866;
  --blue-info: #254fad;
  --blue-info-border: #458fff;
  --green-success: #006400;
  --green-success-border: #39bf45;

  /* ---- Semantic aliases: action ---- */
  --action-primary: var(--ink);
  --action-primary-active: var(--ink-active);
  --action-primary-text: var(--white);
  --action-secondary: var(--white);
  --action-secondary-text: var(--ink);
  --action-secondary-border: var(--gray-300);
  --action-disabled-border: var(--gray-500);
  --action-legal: var(--blue-link);

  /* ---- Semantic aliases: text ---- */
  --text-display: var(--ink);
  --text-body: var(--gray-800);
  --text-muted: var(--gray-700);
  --text-on-dark: var(--white);
  --text-link: var(--blue-link);
  --text-link-active: var(--blue-link-active);
  --text-pricing: var(--near-black-elevated);

  /* ---- Semantic aliases: surface ---- */
  --surface-canvas: var(--white);
  --surface-soft: var(--gray-050);
  --surface-strong: var(--gray-200);
  --surface-dark: var(--ink);
  --surface-dark-elevated: var(--near-black-elevated);
  --surface-signature-coral: var(--coral);
  --surface-signature-forest: var(--forest);
  --surface-callout-cream: var(--cream);
  --surface-demo-peach: var(--peach);
  --surface-demo-mint: var(--mint);
  --surface-demo-yellow: var(--yellow);
  --surface-demo-mustard: var(--mustard);

  /* ---- Semantic aliases: line & state ---- */
  --border-hairline: var(--gray-300);
  --border-strong: var(--gray-500);
  --border-focus: var(--blue-info-border);
  --state-info: var(--blue-info);
  --state-success: var(--green-success);
  --state-success-border: var(--green-success-border);
}
