:root::selection,
:root *::selection {
  background-color: var(--blue-600);
  color: #fff;
  text-shadow: none;
}

:root {
  /* Tonal scales: solid colors, independent of the surface beneath them. */

  /* Neutral */
  --neutral-50: #f3f0e8;
  --neutral-100: #e9e5dc;
  --neutral-200: #ddd9ce;
  --neutral-300: #c1beb4;
  --neutral-400: #a09e96;
  --neutral-500: #777771;
  --neutral-600: #62635d;
  --neutral-700: #4e4f4b;
  --neutral-800: #383a37;
  --neutral-900: #26282a;
  --neutral-950: #191a1c;

  /* Red */
  --red-50: #f8f1ea;
  --red-100: #f5e7de;
  --red-200: #f1d5cb;
  --red-300: #e8bcae;
  --red-400: #dc9b89;
  --red-500: #cc745e;
  --red-600: #b94a32;
  --red-700: #95412f;
  --red-800: #73372c;
  --red-900: #4f2c27;
  --red-950: #322222;

  /* Orange */
  --orange-50: #f7f2ea;
  --orange-100: #f3e8de;
  --orange-200: #ebd9ca;
  --orange-300: #e0c2ad;
  --orange-400: #d1a688;
  --orange-500: #be835c;
  --orange-600: #aa612d;
  --orange-700: #89522c;
  --orange-800: #6a432a;
  --orange-900: #493226;
  --orange-950: #2f2521;

  /* Yellow */
  --yellow-50: #f8f4eb;
  --yellow-100: #f5efe1;
  --yellow-200: #efe4cd;
  --yellow-300: #e5d3b0;
  --yellow-400: #d7bb84;
  --yellow-500: #c59b45;
  --yellow-600: #a18140;
  --yellow-700: #836b3b;
  --yellow-800: #665534;
  --yellow-900: #463e2c;
  --yellow-950: #2e2b25;

  /* Green */
  --green-50: #f3f2ec;
  --green-100: #e8eae2;
  --green-200: #d7dcd2;
  --green-300: #bdc8ba;
  --green-400: #9daf9d;
  --green-500: #77917b;
  --green-600: #52745b;
  --green-700: #45604e;
  --green-800: #384c40;
  --green-900: #2a3832;
  --green-950: #1f2827;

  /* Teal */
  --teal-50: #f2f3ed;
  --teal-100: #e6ebe6;
  --teal-200: #d3deda;
  --teal-300: #b5cbc8;
  --teal-400: #91b3b1;
  --teal-500: #649697;
  --teal-600: #347a7d;
  --teal-700: #2f6468;
  --teal-800: #295053;
  --teal-900: #223a3d;
  --teal-950: #1c292d;

  /* Blue */
  --blue-50: #f0f2f4;
  --blue-100: #e0e9f7;
  --blue-200: #c7d9fa;
  --blue-300: #a2c1fe;
  --blue-400: #73a1ff;
  --blue-500: #3c76ff;
  --blue-600: #003dff;
  --blue-700: #063acd;
  --blue-800: #0c359c;
  --blue-900: #112c6a;
  --blue-950: #132343;

  /* Violet */
  --violet-50: #f4f1ef;
  --violet-100: #ece8e9;
  --violet-200: #ded7e1;
  --violet-300: #cabfd3;
  --violet-400: #b0a2c3;
  --violet-500: #927fae;
  --violet-600: #765c99;
  --violet-700: #614d7d;
  --violet-800: #4c3f63;
  --violet-900: #363047;
  --violet-950: #262431;

  /* Brand anchors */
  --carbon: var(--neutral-950);
  --paper: var(--neutral-50);
  --concrete: var(--neutral-200);
  --blue: var(--blue-600);
  --oxide: var(--red-600);
  --mustard: var(--yellow-500);
  --green: var(--green-600);
  --graphite: var(--neutral-500);

  /* Interface roles */
  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-soft: var(--blue-100);
  --primary-border: var(--blue-300);
  --on-primary: var(--paper);
  --success-bg: var(--green-100);
  --success-border: var(--green-300);
  --success-text: var(--green-800);
  --caution-bg: var(--yellow-100);
  --caution-border: var(--yellow-300);
  --caution-text: var(--yellow-800);
  --danger-bg: var(--red-100);
  --danger-border: var(--red-300);
  --danger-text: var(--red-800);
}