:root {
  --font-family:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, 'Helvetica Neue', sans-serif;
  --font-family-fixed:
    SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Spaces */
  --space-xxxsmall: 4px;
  --space-xxsmall: 8px;
  --space-xsmall: 12px;
  --space-small: 16px;
  --space-medium: 24px;
  --space-large: 32px;
  --space-xlarge: 40px;
  --space-xxlarge: 48px;
  --space-xxxlarge: 64px;

  /* Typography scale */
  --size-xsmall: 0.77rem;
  --size-small: 0.92rem;
  --size: 1rem;
  --size-medium: var(--size);
  --size-large: 1.125rem;
  --size-xlarge: 1.266rem;
  --size-xxlarge: 1.424rem;
  --size-xxxlarge: 1.602rem;
  --size-xxxxlarge: 1.802rem;

  --line-height: 1.66;
  --line-height-heading: 1.33;
  --line-height-number: 1.2em;

  /*
   * Color scheme:
   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
   */
  --color-gray-25: #f9f9f9;
  --color-gray-50: #e5e5e7;
  --color-gray-100: #d2d2d4;
  --color-gray-200: #959499;
  --color-gray-300: #6a6970;
  --color-gray-400: #4a4952;
  --color-gray-500: #2a2933;
  --color-gray-600: #25242e;
  --color-gray-700: #1f1f27;
  --color-gray-800: #191920;
  --color-gray-900: #0f0f14;

  --color-gray-ultra-light: var(--color-gray-200);
  --color-gray-light: var(--color-gray-300);
  --color-gray: var(--color-gray-500);
  --color-gray-dark: var(--color-gray-700);
  --color-gray-ultra-dark: var(--color-gray-900);

  --color-red-25: #fdf5f6;
  --color-red-50: #fbe9ea;
  --color-red-100: #f4c7ca;
  --color-red-200: #eda2a7;
  --color-red-300: #e57c83;
  --color-red-400: #e06069;
  --color-red-500: #da444e;
  --color-red-600: #d63e47;
  --color-red-700: #d0353d;
  --color-red-800: #cb2d35;
  --color-red-900: #c21f25;
  --color-red-ultra-light: var(--color-red-100);
  --color-red-light: var(--color-red-300);
  --color-red: var(--color-red-500);
  --color-red-dark: var(--color-red-700);
  --color-red-ultra-dark: var(--color-red-900);

  --color-blue-25: #f3f8fd;
  --color-blue-50: #e5eff9;
  --color-blue-100: #bfd7f0;
  --color-blue-200: #94bde6;
  --color-blue-300: #69a2db;
  --color-blue-400: #488ed4;
  --color-blue-500: #287acc;
  --color-blue-600: #2472c7;
  --color-blue-700: #1e67c0;
  --color-blue-800: #185db9;
  --color-blue-900: #0f4aad;

  --color-blue-ultra-light: var(--color-blue-100);
  --color-blue-light: var(--color-blue-300);
  --color-blue: var(--color-blue-500);
  --color-blue-dark: var(--color-blue-700);
  --color-blue-ultra-dark: var(--color-blue-900);

  --color-green-25: #f6fbf6;
  --color-green-50: #ebf7ea;
  --color-green-100: #cceacb;
  --color-green-200: #aadca8;
  --color-green-300: #88ce85;
  --color-green-400: #6fc46a;
  --color-green-500: #55b950;
  --color-green-600: #4eb249;
  --color-green-700: #44aa40;
  --color-green-800: #3ba237;
  --color-green-900: #2a9327;

  --color-green-ultra-light: var(--color-green-100);
  --color-green-light: var(--color-green-300);
  --color-green: var(--color-green-500);
  --color-green-dark: var(--color-green-700);
  --color-green-ultra-dark: var(--color-green-900);

  --color-yellow-25: #fffdf2;
  --color-yellow-50: #fdf7e3;
  --color-yellow-100: #f9ecb8;
  --color-yellow-200: #f5e089;
  --color-yellow-300: #f1d35a;
  --color-yellow-400: #eec936;
  --color-yellow-500: #ebc013;
  --color-yellow-600: #e9ba11;
  --color-yellow-700: #e5b20e;
  --color-yellow-800: #e2aa0b;
  --color-yellow-900: #dd9c06;

  --color-yellow-light-background: var(--color-yellow-25);
  --color-yellow-ultra-light: var(--color-yellow-100);
  --color-yellow-light: var(--color-yellow-300);
  --color-yellow: var(--color-yellow-500);
  --color-yellow-ultra-dark: var(--color-yellow-700);
  --color-yellow-dark: var(--color-yellow-900);

  --color-dark: #111;
  --color-light: #fff;

  /* Functional color variables */
  --color-branding-light: #2b76d4;
  --color-branding: #1a477f;
  --color-branding-dark: #09182a;

  --color-text-ultra-light: var(--color-gray-ultra-light);
  --color-text-light: var(--color-gray-light);
  --color-text: var(--color-gray);
  --color-text-dark: var(--color-gray-dark);
  --color-text-ultra-dark: var(--color-gray-ultra-dark);
  --color-heading: var(--color-gray-ultra-dark);

  --color-success-light: var(--color-green-light);
  --color-success: var(--color-green);
  --color-success-dark: var(--color-green-dark);
  --color-info-light: var(--color-blue-light);
  --color-info: var(--color-blue);
  --color-info-dark: var(--color-blue-dark);
  --color-warning-light: var(--color-yellow-light);
  --color-warning: var(--color-yellow);
  --color-warning-dark: var(--color-yellow-dark);
  --color-danger-light: var(--color-red-light);
  --color-danger: var(--color-red);
  --color-danger-dark: var(--color-red-dark);

  --color-primary-light: var(--color-blue-light);
  --color-primary: var(--color-blue);
  --color-primary-dark: var(--color-blue-dark);

  --color-secondary-light: var(--color-green-light);
  --color-secondary: var(--color-green);
  --color-secondary-dark: var(--color-green-dark);

  --color-background: #fff;
  --color-highlight: var(--color-gray-25);
  --color-highlight-primary: var(--color-blue-25);
  --color-highlight-secondary: var(--color-green-25);
  --color-highlight-success: var(--color-green-25);
  --color-highlight-info: var(--color-blue-25);
  --color-highlight-warning: var(--color-yellow-25);
  --color-highlight-danger: var(--color-red-25);

  --color-outline: var(--color-gray-50);
  --color-outline-dark: var(--color-gray-100);

  --color-outline-success: var(--color-green-100);
  --color-outline-info: var(--color-blue-100);
  --color-outline-warning: var(--color-yellow-200);
  --color-outline-danger: var(--color-red-100);

  --color-backdrop: rgba(0, 0, 0, 0.05);
  --color-shadow: rgba(0, 0, 0, 0.25);

  --transition-duration-in: 0.2s;
  --transition-duration-out: 0.17s;
  --transition-in: all var(--transition-duration-in) ease-in;
  --transition-out: all var(--transition-duration-out) ease-out;

  --layer-xlow: 1;
  --layer-low: 10;
  --layer: 100;
  /** for components with overlays (tooltips, hovercards) */
  --layer-high: 1000;
  --layer-xhigh: 10000;
  /** for dialogs/modals */
  --layer-xxhigh: 100000;

  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

  --radius-xsmall: 3px;
  --radius-small: 5px;
  --radius-medium: 7px;
  --radius-large: 9px;

  --skeleton-inline-background: linear-gradient(
    transparent 10%,
    currentColor 10.1%,
    currentColor 89.9%,
    transparent 90%
  );
  --skeleton-block-background: currentColor;
  --skeleton-opacity: 0.06;

  /** Layout */
  --max-width: 88rem;
  --entry-info-width: 64rem;
  --entry-info-top: var(--header-height);
}