html {
  --hoot-color-neutral-950:  #141c22;
  --hoot-color-neutral-1000: #0b1116;

  --surface-app:        var(--hoot-color-neutral-25);
  --surface-card:       var(--hoot-color-base-white);
  --surface-sunken:     var(--hoot-color-neutral-50);
  --surface-nav:        var(--hoot-color-base-white);
  --surface-nav-active: var(--hoot-color-brand-50);

  --text-main:      var(--hoot-color-neutral-900);
  --text-light:     var(--hoot-color-neutral-500);
  --text-faint:     var(--hoot-color-neutral-400);
  --text-contrast:  var(--hoot-color-base-white);
  --text-accent:    var(--hoot-color-brand-500);
  --text-on-accent: var(--hoot-color-base-white);

  --border-light:   var(--hoot-color-neutral-50);
  --border-neutral: var(--hoot-color-neutral-100);

  --border-strong:  var(--hoot-color-neutral-400);

  --accent:        var(--hoot-color-brand-500);
  --draft:         var(--hoot-color-electric-violet-600);
  --accent-strong: var(--hoot-color-brand-700);
  --accent-quiet:  var(--hoot-color-brand-50);

  --accent-alt:       var(--hoot-color-purple-500);
  --accent-alt-quiet: var(--hoot-color-purple-50);

  --danger:        var(--hoot-color-danger-700);
  --danger-quiet:  var(--hoot-color-danger-50);
  --warning:       var(--hoot-color-tertiary-700);
  --warning-quiet: var(--hoot-color-tertiary-50);
  --success:       var(--hoot-color-success-700);
  --success-quiet: var(--hoot-color-success-50);

  --tone-indigo:       var(--hoot-color-brand-600);
  --tone-indigo-quiet: var(--hoot-color-brand-50);
  --tone-indigo-ink:   var(--hoot-color-brand-700);
  --tone-teal:         var(--hoot-color-secondary-700);
  --tone-teal-quiet:   var(--hoot-color-secondary-50);
  --tone-teal-ink:     var(--hoot-color-secondary-700);
  --tone-amber:        var(--hoot-color-tertiary-600);
  --tone-amber-quiet:  var(--hoot-color-tertiary-50);
  --tone-amber-ink:    var(--hoot-color-tertiary-700);
  --tone-rose:         var(--hoot-color-pink-600);
  --tone-rose-quiet:   var(--hoot-color-pink-50);
  --tone-rose-ink:     var(--hoot-color-pink-700);
  --tone-violet:       var(--hoot-color-electric-violet-600);
  --tone-violet-quiet: var(--hoot-color-electric-violet-50);
  --tone-violet-ink:   var(--hoot-color-electric-violet-700);
  --tone-slate:        var(--hoot-color-neutral-600);
  --tone-slate-quiet:  var(--hoot-color-neutral-25);
  --tone-slate-ink:    var(--hoot-color-neutral-700);

  --shadow-card:    0 1px 2px rgba(29, 42, 49, .06), 0 1px 3px rgba(29, 42, 49, .04);
  --shadow-raised:  0 4px 10px rgba(15, 23, 42, .08);
  --shadow-overlay: 0 8px 20px rgba(15, 23, 42, .25);
  --overlay-scrim:  rgba(15, 23, 42, .35);
  --focus-ring:     0 0 0 3px rgba(30, 58, 138, .08);
  --glow-danger:    0 1px 2px rgba(239, 68, 68, .35);

  --type-title-size:   18px;
  --type-title-line:   1.4;
  --type-body-size:    14px;
  --type-body-line:    22px;
  --type-small-size:   12px;
  --type-small-line:   20px;
  --type-label-size:   12px;
  --type-label-line:   18px;
  --type-label-weight: 500;
  --type-label-track:  0.5px;

  --chart-1: var(--hoot-color-brand-500);
  --chart-2: var(--hoot-color-pink-500);
  --chart-3: var(--hoot-color-secondary-500);
  --chart-4: var(--hoot-color-purple-500);
  --chart-5: var(--hoot-color-tertiary-600);
  --chart-6: var(--hoot-color-electric-violet-600);

  --chart-grid: var(--hoot-color-neutral-50);
  --chart-ink:  var(--hoot-color-neutral-500);

  --ordinal-1: var(--hoot-color-brand-200);
  --ordinal-2: var(--hoot-color-brand-300);
  --ordinal-3: var(--hoot-color-brand-400);
  --ordinal-4: var(--hoot-color-brand-500);
  --ordinal-5: var(--hoot-color-brand-700);

  --diverging-neg-2: var(--hoot-color-danger-900);
  --diverging-neg-1: var(--hoot-color-danger-600);
  --diverging-mid:   var(--hoot-color-neutral-300);
  --diverging-pos-1: var(--hoot-color-success-600);
  --diverging-pos-2: var(--hoot-color-success-700);
}