// // Semantic UI related
// Colors
@textColor: #000;
@darkBlue: #023d6b;
@white: #fff;
@veryLightGrey: #eee;
@darkGrey: #555555;
@black: #000;
@grey: #666;
@lightgrey: #ecebeb;
@linkColor: #205c90;

@emSize: 18px;
@fontSize: 18px;
@lineHeight: 24px;

@importGoogleFonts: false;
@selectedTextColor: @textColor;

// Headers font size
@h1: @60px;
@h2: @30px;
@h3: @24px;

@BlockTitleH2: @42px;

@headingTitleTopSpacing: 100px;
@headingTitleBottomSpacing: 75px;
@paddingColoredPills: 20px;

@headingTextTopSpacing: 50px;
@headingTextBottomSpacing: 25px;

@blockVerticalSpace: 25px;

// Fonts
@customFontName: 'Inter';
@pageFontTemplate: @customFontName, sans-serif;
@pageFont: var(--custom-main-font, @pageFontTemplate);
@headerFont: var(--custom-headers-font, @pageFont);

// Breakpoints
@tabletBreakpoint: 769px;
@computerWidth: 940px;
@computerBreakpoint: 941px;
@largeMonitorWidth: 1440px;
@largeMonitorBreakpoint: 1441px;

// Rest of theme variables

// Image Aspect Ratio
@aspectRatio: var(--image-aspect-ratio, 16/9);

// Weights
@light: 300;
@bold: 700;

// Vertical Spacing
// Change of color
@colorBlockChangeVerticalSpacing: 100px;

// Grids
@gridBlockVerticalSpacingTop: 100px;
@gridBlockVerticalSpacingBottom: 100px;