:root {
  --ink: #0E1116;
  --cobalt: #2B50E8;
  --steel: #6B7480;
  --paper: #FAFAF8;

  --cobalt-50: #ECF5FF;
  --cobalt-100: #D3E8FF;
  --cobalt-200: #ADCFFF;
  --cobalt-300: #7DAAFF;
  --cobalt-400: #4A7AFF;
  --cobalt-500: #2B50E8;
  --cobalt-600: #1E3AC9;
  --cobalt-700: #152D94;
  --cobalt-800: #0E2063;
  --cobalt-900: #06113A;

  --neutral-0: #FFFFFF;
  --neutral-50: #F8FAFC;
  --neutral-100: #EFF2F5;
  --neutral-200: #DEE2E5;
  --neutral-300: #C7CBCF;
  --neutral-400: #A0A5AA;
  --neutral-500: #7B8187;
  --neutral-600: #5E646A;
  --neutral-700: #43484E;
  --neutral-800: #25292E;
  --neutral-900: #0C1013;

  --positive: #0E7A4B;
  --positive-bg: #E6F5EC;
  --warning: #9C6B0A;
  --warning-bg: #FBF3DC;
  --danger: #C93030;
  --danger-bg: #FCEBEB;

  --text-heading: var(--ink);
  --text-body: var(--neutral-600);
  --text-muted: var(--steel);
  --text-on-brand: #FFFFFF;
  --text-on-dark: var(--paper);
  --text-body-on-dark: var(--neutral-300);
  --link: var(--cobalt-500);
  --link-hover: var(--cobalt-600);
  --link-on-dark: var(--cobalt-400);

  --surface-page: var(--paper);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-tint: var(--cobalt-50);
  --surface-tint-hover: var(--cobalt-100);
  --surface-inverse: var(--ink);
  --surface-brand: var(--cobalt-500);

  --brand: var(--cobalt-500);
  --brand-hover: var(--cobalt-600);
  --brand-active: var(--cobalt-700);
  --brand-disabled: var(--cobalt-300);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-tint: var(--cobalt-200);
  --border-on-dark: var(--neutral-700);
  --focus-ring: var(--cobalt-500);
}