:root{
  --blue-primary: #56ccf2;
  --blue-primary-active: #2fa8d1;
  --blue-primary-disabled: #a8b8cc;
  --yellow-accent: #f4b000;
  --green-up: #05b169;
  --red-down: #cf202f;

  --white: #ffffff;
  --gray-canvas: #ffffff;
  --gray-surface-soft: #f7f7f7;
  --gray-surface-strong: #eef0f3;
  --near-black: #0a0b0d;
  --dark-elevated: #16181c;
  --hairline: #dee1e6;
  --hairline-soft: #eef0f3;

  --gray-body: #5b616e;
  --gray-muted: #7c828a;
  --gray-muted-soft: #a8acb3;
  --white-soft: #a8acb3;

  /* Semantic aliases */
  --color-primary: var(--blue-primary);
  --color-primary-active: var(--blue-primary-active);
  --color-primary-disabled: var(--blue-primary-disabled);
  --color-accent-yellow: var(--yellow-accent);
  --color-semantic-up: var(--green-up);
  --color-semantic-down: var(--red-down);

  --color-canvas: var(--gray-canvas);
  --color-surface-soft: var(--gray-surface-soft);
  --color-surface-strong: var(--gray-surface-strong);
  --color-surface-dark: var(--near-black);
  --color-surface-dark-elevated: var(--dark-elevated);
  --color-hairline: var(--hairline);
  --color-hairline-soft: var(--hairline-soft);

  --text-ink: var(--near-black);
  --text-body: var(--gray-body);
  --text-body-strong: var(--near-black);
  --text-muted: var(--gray-muted);
  --text-muted-soft: var(--gray-muted-soft);
  --text-on-primary: var(--white);
  --text-on-dark: var(--white);
  --text-on-dark-soft: var(--white-soft);
}