:root {
  /* 🎨 Colors */
  --primary-theme-color: #399ae4;
  --secondary-color: #ff1700;
  --pri-secondary-color: #ff7300;

  --text-color-dark: #212529;
  --text-color-light-dark: #343a40;
  --text-color-light: #495057;
  --text-color-lightest: #adb5bd;
  --text-color-white: #ffffff;
  --text-color-grey-white: #dee2e6;

  /* 🔤 Typography */
  --font-family-base: 'Poppins', sans-serif;
  --font-family-heading: 'Poppins', sans-serif;

  --font-size-display: 2.5rem; /* ~40px */
  --font-size-header: 2.125rem; /* ~34px */
  --font-size-title: 1.875rem; /* ~30px */
  --font-size-sub-title: 1.5rem; /* ~24px */
  --font-size-medium: 1.25rem; /* ~20px */
  --font-size-normal: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* ~14px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;

  /* 📱 Layout */
  --screen-max-width: 90rem; /* 1440px */
  --desktop-screen-padding: 1.25rem; /* 20px */
  --desktop-screen-padding-large: 2.5rem; /* 40px */
  --mobile-screen-padding: 0.625rem; /* 10px */

  /* 📏 Spacing */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 2rem; /* 32px */

  /* 🔲 Border Radius */
  --border-radius-small: 0.5rem; /* 8px */
  --border-radius-normal: 1.125rem; /* 18px */
  --border-radius-full: 50%; /* 100% */
}