/* Colors — from UI Kit 2.0 Figma tokens (file 7RUiv3M8bLzEsteITExlfr).
   Base ramps use 100 (tint) / 300 (mid) / 500 (core) exactly as exported. */
:root {
  /* Brand — violet */
  --brand-100: #e7e6f7;
  --brand-300: #b88dd8;
  --brand-500: #8941be;

  /* Neutral — grays */
  --gray-100: #e4e4e6;
  --gray-400: #72747c;
  --gray-500: #131521;

  /* Blue Bell — info / accent blue */
  --blue-bell-100: #cce8f7;
  --blue-bell-300: #66bbe6;
  --blue-bell-500: #008dd5;

  /* Brick Ember — danger / error red */
  --brick-ember-100: #f6cccc;
  --brick-ember-300: #e36666;
  --brick-ember-500: #d10000;

  /* Hunter Green — success */
  --hunter-green-100: #d6e1d8;
  --hunter-green-300: #adc2b1;
  --hunter-green-500: #33673b;

  /* Lights */
  --white: #ffffff;
  --background: #f4f2ee;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--brand-500);
  --color-primary-hover: #74359f;      /* brand-500 darkened ~8% */
  --color-primary-tint: var(--brand-100);

  --text-strong: var(--gray-500);
  --text-body: #2c2e38;                /* gray-500 lifted for body copy */
  --text-muted: var(--gray-400);
  --text-on-primary: var(--white);
  --text-link: var(--blue-bell-500);
  --text-link-hover: #0072ab;

  --surface-page: var(--background);
  --surface-card: var(--white);
  --surface-sunken: #ebe8e2;           /* darker than page */

  --border-subtle: var(--gray-100);
  --border-default: #d4d4d8;
  --border-strong: var(--gray-400);

  --color-info: var(--blue-bell-500);
  --color-info-tint: var(--blue-bell-100);
  --color-success: var(--hunter-green-500);
  --color-success-tint: var(--hunter-green-100);
  --color-danger: var(--brick-ember-500);
  --color-danger-tint: var(--brick-ember-100);

  --focus-ring: color-mix(in srgb, var(--brand-500) 40%, transparent);
}