/* Colors — mirrors pactole-universal/src/styled/designToken/colors */
:root{
  /* Neutral (blue-tinted greys) */
  --neutral-500:#0A2E52;
  --neutral-400:#375573;
  --neutral-300:#5A7997;
  --neutral-200:#B7C6D5;
  --neutral-100:#F0F5FA;

  /* Brand blue */
  --blue-500:#003290;

  /* LightBlue — interaction */
  --light-blue-500:#0860CC;
  --light-blue-400:#136AE8;
  --light-blue-300:#89BBF4;
  --light-blue-200:#DCEAFA;
  --light-blue-100:#F5FAFF;

  /* Yellow — warning / secondary brand */
  --yellow-500:#F0DB51;
  --yellow-400:#FDEC3C;
  --yellow-300:#FFF799;
  --yellow-200:#FFF9B8;
  --yellow-100:#FEFBE0;

  /* Pink — callout / chili accent */
  --pink-500:#DA1B74;
  --pink-400:#EF82B5;
  --pink-300:#FCC5DD;
  --pink-200:#FBE7EF;
  --pink-100:#FFF7FB;

  /* Green — success */
  --green-500:#34992B;
  --green-400:#42CB36;
  --green-300:#8EE087;
  --green-200:#C0F5BA;
  --green-100:#EFFCED;

  /* Red — error */
  --red-500:#99211F;
  --red-400:#C22F2D;
  --red-300:#EB8E8D;
  --red-200:#F5BBBA;
  --red-100:#FAE6E6;

  --black:#000000;
  --white:#FFFFFF;

  /* Semantic — brand */
  --primary:var(--blue-500);

  /* Semantic — text */
  --text-primary:var(--neutral-500);
  --text-secondary:var(--neutral-300);
  --text-alt:var(--white);
  --text-highlight:var(--light-blue-500);
  --text-callout:var(--pink-500);
  --text-success:var(--green-500);
  --text-warning:var(--yellow-500);
  --text-error:var(--red-500);
  --text-disabled:var(--neutral-200);

  /* Semantic — background */
  --bg-primary:var(--white);
  --bg-secondary:var(--neutral-100);
  --bg-highlight:var(--light-blue-100);
  --bg-callout:var(--pink-100);
  --bg-success:var(--green-100);
  --bg-warning:var(--yellow-100);
  --bg-error:var(--red-100);

  /* Semantic — border */
  --border-primary:var(--neutral-200);
  --border-alt:var(--white);
  --border-highlight:var(--light-blue-200);
  --border-callout:var(--pink-200);
  --border-success:var(--green-200);
  --border-warning:var(--yellow-200);
  --border-error:var(--red-200);

  /* Semantic — interaction */
  --interaction-default:var(--light-blue-400);
  --interaction-hover:var(--light-blue-500);
  --interaction-active:var(--blue-500);
  --interaction-active-light:var(--light-blue-200);
  --interaction-active-soft:var(--light-blue-100);
  --interaction-error-default:var(--red-400);
  --interaction-error-hover:var(--red-500);
  --interaction-error-disabled:var(--red-100);
  --interaction-disabled:var(--neutral-200);
}