@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:ital,wght@0,300;0,400;0,700;1,400&display=swap');

html { font-size: 16px; }

:root {
  /* ==== COLOR VARIABLES==== */
  /* Brand Colors */
  --brand-primary-blue: #0B71DD;
  --brand-primary-dark-blue: #022041;

  /* Brand Accent Colors */
  --brand-accent-blue: #085DB6;
  --brand-accent-dark-blue: #102E4E;

  /* Light Colors */
  --light-colors-white: #FFF;
  --light-colors-soft-white: #F1F1F2;
  --light-colors-light: #F8F9FA;
  --light-colors-soft-light-gray: #E6E6E6;
  --light-colors-light-gray: #CDCDCD;

  /* Dark Colors */
  --dark-black: #000;
  --dark-soft-black: #222;
  --dark-gray: #444;

  /* Alpha Colors */
  --alpha-white-10: rgba(255, 255, 255, 0.10);
  --alpha-white-25: rgba(255, 255, 255, 0.25);
  --alpha-white-50: rgba(255, 255, 255, 0.50);
  --alpha-white-75: rgba(255, 255, 255, 0.75);
  --alpha-black-10: rgba(0, 0, 0, 0.1);
  --alpha-black-25: rgba(0, 0, 0, 0.25);
  --alpha-black-50: rgba(0, 0, 0, 0.50);
  --alpha-black-75: rgba(0, 0, 0, 0.75);
  --alpha-brand-blue-10: rgba(11, 113, 221, 0.10);
  --alpha-brand-blue-25: rgba(11, 113, 221, 0.25);
  --alpha-brand-blue-50: rgba(11, 113, 221, 0.50);
  --alpha-brand-blue-75: rgba(11, 113, 221, 0.75);
  --alpha-brand-dark-blue-25: rgba(2,32,65,.25);
  --alpha-brand-dark-blue-50: rgba(2,32,65,.5);
  --alpha-brand-dark-blue-75: rgba(2,32,65,.75);
  --alpha-danger-600-25: rgba(219, 43, 32, 0.25);

  /* Border */
  --border-light: #CCD5E0;
  --border-dark: #718096;

  /* Text */
  --text-header: #022041;
  --text-content-primary: #212427;
  --text-content-secondary: #444A51;

  /* Blue Shades */
  --dr-blue-900: #02206A;
  --dr-blue-800: #02206A;
  --dr-blue-700: #05419F;
  --dr-blue-600: #0857BE;
  --dr-blue-500: #0B71DD;
  --dr-blue-400: #439CEA;
  --dr-blue-300: #69BAF4;
  --dr-blue-200: #9BD8FB;
  --dr-blue-100: #CDEDFD;

  /* Success Shades */
  --dr-success-900: #055306;
  --dr-success-800: #0E6509;
  --dr-success-700: #0E6509;
  --dr-success-600: #2E9615;
  --dr-success-500: #44AF1D;
  --dr-success-400: #79CF4D;
  --dr-success-300: #A2E773;
  --dr-success-200: #CBF7A4;
  --dr-success-100: #E7FBD1;

  /* Warning Shades */
  --dr-warning-900: #7A4300;
  --dr-warning-800: #935600;
  --dr-warning-700: #B77100;
  --dr-warning-600: #DB8E00;
  --dr-warning-500: #FFAE00;
  --dr-warning-400: #FFC83F;
  --dr-warning-300: #FFD866;
  --dr-warning-200: #FFE899;
  --dr-warning-100: #FFF5CC;

  /* Danger Shades */
  --dr-danger-900: #7A081D;
  --dr-danger-800: #930E1C;
  --dr-danger-700: #B7161A;
  --dr-danger-600: #DB2B20;
  --dr-danger-500: #FF492D;
  --dr-danger-400: #FF8261;
  --dr-danger-300: #FFA581;
  --dr-danger-200: #FFCAAB;
  --dr-danger-100: #FFE7D5;

  /* ==== SPACING VARIABLES ==== */
  --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.375rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
  --spacing-2xl: 1.5rem;
  --spacing-3xl: 2rem;
  --spacing-4xs: 2.5rem;

  /* ==== RADIUS VARIABLES ==== */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  --font-family: 'Roboto', sans-serif;
}