@use 'sass:color';

// import DM Sans font
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');$primary-color: #3498db;

$primary-color: #00659C;
$secondary-color: #2ecc71;
$text-color: #333333;
$font-family: 'DM Sans', sans-serif;

:root {
  --primary-color: #00659C;
  --secondary-color: #2ecc71;
  --text-color: #333333;
  --heading-color: #7D7D7D;
  --text-muted-color: #B3B3B3;
  --light-gray: #E4E4E4;
  --icon-gray: #F5F2F2;
  --background-color: #ffffff;
  --white: #ffffff;
  --black: #000000;
  --gold: #FFD700;
  // vertical linear gradient from top to bottom, FFFFFF at 0% Fill 100% to 00659C at 100% Fill 20%
  --gradient-bg: linear-gradient(180deg, #FFFFFF 0%, #B6D3E2 100%);
  // glass horizontal linear gradient background fill 75%, FFFFFF at 0% fill 50% to FFFCFF at 100% fill 30%
  --glass-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 252, 255, 0.75) 100%);
}

// Font Size Base Values
$font-sizes: (
  min: 10px,
  small: 12px,
  medium: 14px,
  large: 16px,
  xlarge: 18px,
  xxlarge: 20px,
);

// Responsive Font Size Adjustments (for screens <= 768px)
$font-sizes-responsive: (
  min: 8px,
  small: 12px,
  medium: 14px,
  large: 16px,
  xlarge: 18px,
  xxlarge: 20px
);

// Heading Font Size Base Values
$heading-sizes: (
  small: 16px,
  medium: 18px,
  large: 20px,
  xlarge: 24px,
  xxlarge: 30px,
  xxxlarge: 46px,
  3xlarge: 76px,
  5xlarge: 96px,
  7xlarge: 120px,
);

// Responsive Heading Size Adjustments (for screens <= 768px)
$heading-sizes-responsive: (
  small: 18px,
  medium: 20px,
  large: 22px,
  xlarge: 26px,
  xxlarge: 32px
);

// Font Weights
$font-weights: (
  normal: 400,
  medium: 700,
  bold: 900
);