:root {

  /* ============================================================
     BRAND COLOURS
     ============================================================ */
  --color-deep-blue:      #001349;
  --color-dark-blue:      #00217F;
  --color-action:         #0056E0;
  --color-light-blue:     #2482FF;
  --color-blue-200:       #8EC9FF;
  --color-teal:           #00B7BD;
  --color-dark-teal:      #009EA3;

  /* ============================================================
     SEMANTIC COLOURS
     ============================================================ */
  --color-danger:         #E42732;
  --color-warning:        #FFCB00;
  --color-success:        #48C76B;
  --color-ai:             #716BCF;

  /* ============================================================
     NEUTRAL COLOURS
     ============================================================ */
  --color-black:          #000000;
  --color-darkest-grey:   #2B2B2B;
  --color-darker-grey:    #4E4E4E;
  --color-dark-grey:      #828282;
  --color-medium-grey:    #C8C8C8;
  --color-light-grey:     #E6E6E6;
  --color-pale-grey:      #F5F5F5;
  --color-white:          #FFFFFF;
  --color-negative:       #FFFFFF;

  /* ============================================================
     COLOUR RAMPS
     ============================================================ */

  /* Blue */
  --color-blue-500:       #1892FF;
  --color-blue-400:       #39A2FF;
  --color-blue-300:       #5EB3FF;
  --color-blue-100:       #BBDDFF;
  --color-blue-50:        #E3F2FF;
  --color-blue-25:        #F1F9FF;

  /* Purple */
  --color-purple-900:     #3B1C8B;
  --color-purple-800:     #4731A2;
  --color-purple-700:     #4E3CAE;
  --color-purple-600:     #5747BA;
  --color-purple-500:     #5D4FC5;
  --color-purple-300:     #8987D8;
  --color-purple-200:     #AAA9E4;
  --color-purple-100:     #CCCBEF;
  --color-purple-50:      #EBEAF8;
  --color-purple-25:      #F5F5FC;

  /* Red */
  --color-red-900:        #C80D1E;
  --color-red-800:        #D71E2A;
  --color-red-600:        #F73338;
  --color-red-500:        #FF3D38;
  --color-red-300:        #F37477;
  --color-red-200:        #F99C9E;
  --color-red-100:        #FFCED5;
  --color-red-50:         #FFECEF;
  --color-red-25:         #FFF6F7;

  /* Yellow */
  --color-yellow-900:     #FF6D00;
  --color-yellow-800:     #FF8F00;
  --color-yellow-700:     #FFA100;
  --color-yellow-600:     #FFB500;
  --color-yellow-500:     #FFC300;
  --color-yellow-300:     #FFD743;
  --color-yellow-200:     #FFE17C;
  --color-yellow-100:     #FFEDB0;
  --color-yellow-50:      #FFF8E0;

  /* Green */
  --color-green-900:      #00691C;
  --color-green-800:      #008930;
  --color-green-700:      #009A3B;
  --color-green-600:      #00AD47;
  --color-green-500:      #0ABC51;
  --color-green-300:      #6FD287;
  --color-green-200:      #9BDEAA;
  --color-green-100:      #C3EBCB;
  --color-green-50:       #E6F7EA;
  --color-green-25:       #F3FBF5;

  /* Pink */
  --color-pink-900:       #8C00B6;
  --color-pink-800:       #B200BD;
  --color-pink-700:       #C600C1;
  --color-pink-600:       #DD00C5;
  --color-pink-500:       #ED00C7;
  --color-pink:           #FF00DD;
  --color-pink-300:       #FF78E6;
  --color-pink-200:       #FFB3F0;
  --color-pink-100:       #FFE1F9;
  --color-pink-50:        #FFF0FC;
  --color-pink-25:        #FFF8FE;

  /* Teal */
  --color-teal-900:       #002526;
  --color-teal-800:       #00494C;
  --color-teal-700:       #006E71;
  --color-teal-400:       #66D4D7;
  --color-teal-300:       #99E2E5;
  --color-teal-200:       #CCF1F2;
  --color-teal-100:       #E6F8F8;
  --color-teal-50:        #F2FBFC;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-heading:              'Poppins', sans-serif;
  --font-body:                 'Roboto', sans-serif;

  /* Type styles — use as: font: var(--type-xxx); */
  --type-display:              700 58px/1.2 'Poppins', sans-serif;
  --type-data-metric:          700 20px/1.2 'Poppins', sans-serif;
  --type-body-large:           400 18px/1.4 'Roboto', sans-serif;
  --type-body-base:            400 16px/1.4 'Roboto', sans-serif;
  --type-body-medium:          400 14px/1.4 'Roboto', sans-serif;
  --type-body-small:           400 12px/1.4 'Roboto', sans-serif;
  --type-body-tiny:            400 11px/1.4 'Roboto', sans-serif;
  --type-button-label:         400 16px/1   'Roboto', sans-serif;
  --type-button-label-sm:      400 14px/1   'Roboto', sans-serif;
  --type-input-label:          400 16px/1   'Roboto', sans-serif;
  --type-input-label-sm:       400 14px/1   'Roboto', sans-serif;
  --type-tag-label:            400 12px/1   'Roboto', sans-serif;
  --type-nav-primary:          400 16px/1.4 'Roboto', sans-serif;
  --type-nav-primary-selected: 700 16px/1.4 'Roboto', sans-serif;
  --type-nav-secondary:        400 14px/1.4 'Roboto', sans-serif;

  /* ============================================================
     SPACING
     ============================================================ */
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-24:   24px;
  --space-32:   32px;
  --space-48:   48px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:      4px;
  --radius-default: 8px;
  --radius-lg:      12px;
  --radius-pill:    100px;

  /* ============================================================
     ELEVATION / SHADOWS
     ============================================================ */
  --shadow-1: 0px 0px 2px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.14);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.16);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --header-height:    60px;
  --sidenav-width:    232px;
  --content-padding:  24px;

}