:root {
  /* Primary Colors */
  --color-primary:   #0064B5;
  --color-secondary: #00B350;

  /* COLORS */
  --color-black: #0A111D;
  --color-white: #FFFFFF;

  /* Blue */
  --color-blue-50:  #DCEEF5;
  --color-blue-100: #95CEE8;
  --color-blue-200: #69B3DB;
  --color-blue-300: #4299CF;
  --color-blue-400: #1F7EC2;
  --color-blue-500: #0064B5;
  --color-blue-600: #004A8F;
  --color-blue-700: #003663;
  --color-blue-800: #001E42;
  --color-blue-900: #000C1C;

  /* Green */
  --color-green-50:  #DAF2E1;
  --color-green-100: #93E6AD;
  --color-green-200: #68D98F;
  --color-green-300: #41CC76;
  --color-green-400: #1FBF62;
  --color-green-500: #00B350;
  --color-green-600: #008A3F;
  --color-green-700: #006635;
  --color-green-800: #004023;
  --color-green-900: #001A0F;

  /* Gray */
  --color-gray-50:  #F0F4F8;
  --color-gray-100: #E9EDF2;
  --color-gray-200: #D7DCE0;
  --color-gray-300: #C3CAD4;
  --color-gray-400: #939BAE;
  --color-gray-500: #646E82;
  --color-gray-600: #454F62;
  --color-gray-700: #2E3646;
  --color-gray-800: #252B37;
  --color-gray-900: #1E232E;

  /* Utility Colors */
  --color-text: #252B37;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-border: #C3CAD4;

  /* TRANSITION */
  --transition-default: all 0.3s ease-in-out;

  /* FONT: FAMILY */
  --font-family-primary: 'Inter', sans-serif;
  --font-family-secondary: 'Poppins', sans-serif;

  /* PX TO REM */
  --px-base: 16;
  --px-to-rem: 1rem;

  /* PX TO REM: 10-20 */
  --px-10: calc(10 / var(--px-base) * var(--px-to-rem));
  --px-12: calc(12 / var(--px-base) * var(--px-to-rem));
  --px-13: calc(13 / var(--px-base) * var(--px-to-rem));
  --px-14: calc(14 / var(--px-base) * var(--px-to-rem));
  --px-16: calc(16 / var(--px-base) * var(--px-to-rem));
  --px-18: calc(18 / var(--px-base) * var(--px-to-rem));
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 21-30 */
  --px-21: calc(21 / var(--px-base) * var(--px-to-rem));
  --px-22: calc(22 / var(--px-base) * var(--px-to-rem));
  --px-24: calc(24 / var(--px-base) * var(--px-to-rem));
  --px-26: calc(26 / var(--px-base) * var(--px-to-rem));
  --px-27: calc(27 / var(--px-base) * var(--px-to-rem));
  --px-28: calc(28 / var(--px-base) * var(--px-to-rem));
  --px-29: calc(29 / var(--px-base) * var(--px-to-rem));
  --px-30: calc(30 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 32-40 */
  --px-32: calc(32 / var(--px-base) * var(--px-to-rem));
  --px-34: calc(34 / var(--px-base) * var(--px-to-rem));
  --px-36: calc(36 / var(--px-base) * var(--px-to-rem));
  --px-39: calc(39 / var(--px-base) * var(--px-to-rem));
  --px-40: calc(40 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 42-50 */
  --px-42: calc(42 / var(--px-base) * var(--px-to-rem));
  --px-44: calc(44 / var(--px-base) * var(--px-to-rem));
  --px-48: calc(48 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 52-60 */
  --px-52: calc(52 / var(--px-base) * var(--px-to-rem));
  --px-54: calc(54 / var(--px-base) * var(--px-to-rem));
  --px-56: calc(56 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 62-70 */
  --px-62: calc(62 / var(--px-base) * var(--px-to-rem));
  --px-64: calc(64 / var(--px-base) * var(--px-to-rem));

  /* === CONTAINER === */
  --container: 100%;
}

@media (min-width: 1025px) {
  :root {
    --container: 1440px;
  }
}